/* includes/cartverify.php */
.cs-checkout-wrapper {
    max-width: 1100px;
    margin: 20px auto 40px auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #222;
    padding: 0 12px;
  }

  .cs-page-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .cs-page-sub {
    font-size: 13px;
    color: #666;
    margin-bottom: 18px;
  }

  .cs-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 18px;
  }

  .cs-card-highlight {
    border-left: 4px solid #0066cc;
  }

  .cs-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .cs-grid-2 {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }

  .cs-col {
    flex: 1 1 260px;
  }

  .cs-option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cs-option-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    text-decoration: none;
    color: #222;
    font-size: 14px;
    background: #fafafa;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .cs-option-link:hover {
    background: #f0f4ff;
    border-color: #0066cc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }

  .cs-option-link.cs-option-active {
    background: #e8f2ff;
    border-color: #0066cc;
    box-shadow: 0 0 0 1px #0066cc;
    font-weight: 600;
  }

  .cs-option-label {
    display: block;
  }

  .cs-option-price {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
  }

  .cs-payment-info {
    font-size: 14px;
    line-height: 1.5;
  }

  .cs-legal {
    font-size: 13px;
    color: #444;
  }

.cs-buy-button {
  display: block;        /* statt inline-block */
  width: 100%;           /* volle Kartenbreite */
  margin-top: 14px;
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  background: #0066cc;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;    /* Text mittig */
}

  .cs-buy-button:hover {
    background: #004f99;
  }

  .cs-cart-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  .cs-address-block {
    font-size: 14px;
    line-height: 1.5;
  }

  .cs-address-block b {
    font-size: 15px;
  }

  .cs-address-change-link a {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #f3f3f3;
    text-decoration: none;
    font-size: 13px;
    color: #0066cc;
  }

  .cs-address-change-link a:hover {
    background: #e6e6e6;
  }

  details.cs-details summary {
    cursor: pointer;
    font-size: 14px;
    color: #0066cc;
    text-decoration: underline;
  }

  details.cs-details[open] summary {
    font-weight: 600;
  }

  .cs-details-content {
    margin-top: 12px;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
  }

  .cs-text-mini {
    font-size: 12px;
    color: #666;
  }


  .cs-warranty-notice {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 18px 0;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #e2e2e2;
    border-left: 3px solid #c62828;
  }

  .cs-warranty-visual {
    flex: 0 0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
  }

  .cs-warranty-image {
    display: block;
    max-height: 150px;
    max-width: 220px;
    width: auto;
    height: auto;
    background: #fff;
  }

  .cs-warranty-zoom {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: #777;
  }

  .cs-warranty-copy {
    min-width: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #555;
  }

  .cs-warranty-copy strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: #222;
  }

  .cs-warranty-copy a {
    color: #c62828;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (max-width: 620px) {
    .cs-warranty-notice {
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
    }

    .cs-warranty-image {
      max-height: 118px;
      max-width: 145px;
    }

    .cs-warranty-copy strong {
      font-size: 14px;
    }

    .cs-warranty-copy {
      font-size: 11px;
    }
  }

  @media (max-width: 768px) {
    .cs-page-title {
      font-size: 22px;
    }
  }

/* includes/mypwchange.php */
.flexlcentcont {
display: flex;
flex-direction:row;
justify-content:left;
background-color: transparent;
}

.flexmxitems {
background-color: transparent;
width: 45%;
margin: 10px;
text-align: left;
line-height: 22px;
font-size: 14px;
padding-bottom: 11px;
}


@media (max-width: 1000px) {
.flexlcentcont {
display: flex;
flex-direction:column;
width:100%;
justify-content:left;
background-color: transparent;
}

.flexmxitems {
background-color: transparent;
width: 90%;
margin: 10px;
text-align: left;
line-height: 22px;
font-size: 14px;
padding-bottom: 11px;
}
}

/* includes/myaccount.php */
.flexlcentcont {
display: flex;
flex-direction:row;
justify-content:left;
background-color: white;
}

.flexmxitems {
background-color: white;
width: 35%;
margin: 10px;
text-align: left;
line-height: 18px;
font-size: 14px;
padding-bottom: 11px;
}


@media (max-width: 1000px) {
.flexlcentcont {
display: flex;
flex-direction:column;
width:100%;
justify-content:left;
background-color: white;
}

.flexmxitems {
background-color: white;
width: 90%;
margin: 10px;
text-align: left;
line-height: 18px;
font-size: 14px;
padding-bottom: 11px;
}
}

/* includes/orderfinal.php */
.cs-orderfinal,.cs-orderfinal *{box-sizing:border-box}
.cs-orderfinal{max-width:1180px;margin:24px auto 70px;padding:0 18px;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#222}
.cs-orderfinal-hero{padding:34px 34px 30px;background:#f7f7f7;border-top:4px solid #c62828;margin-bottom:22px}
.cs-orderfinal-kicker{margin:0 0 7px;color:#c62828;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cs-orderfinal-hero h1{margin:0 0 10px;font-size:clamp(30px,4vw,46px);line-height:1.08;font-weight:500}
.cs-orderfinal-hero p{margin:0;max-width:820px;color:#58616a;font-size:14px;line-height:1.65}
.cs-orderfinal-ref{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 11px;background:#fff;border:1px solid #ddd;font-size:12px}.cs-orderfinal-ref strong{font-size:14px;color:#111}
.cs-orderfinal-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:22px;margin-top:22px}
.cs-orderfinal-card{background:#fff;border:1px solid #e1e1e1;padding:24px;margin-bottom:22px}.cs-orderfinal-card h2{margin:0 0 18px;font-size:20px;font-weight:650}.cs-orderfinal-card h3{margin:22px 0 9px;font-size:14px}
.cs-orderfinal-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.cs-orderfinal-meta__item{padding:11px 0;border-bottom:1px solid #eee}.cs-orderfinal-meta__item span{display:block;margin-bottom:3px;color:#777;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.cs-orderfinal-meta__item strong{font-size:14px;overflow-wrap:anywhere}
.cs-orderfinal-total{margin-top:19px;padding-top:17px;border-top:2px solid #c62828;display:flex;align-items:baseline;justify-content:space-between;gap:20px}.cs-orderfinal-total span{font-size:13px;font-weight:700}.cs-orderfinal-total strong{font-size:28px;line-height:1}
.cs-orderfinal-address{font-size:14px;line-height:1.65}.cs-orderfinal-note{margin-top:14px;padding:12px 14px;background:#fafafa;border-left:3px solid #c62828;color:#555;font-size:12px;line-height:1.55}.cs-orderfinal-cart{margin-top:12px;overflow-x:auto}.cs-orderfinal-cart table{width:100%!important}
.cs-orderfinal-payment{padding:24px;margin:22px 0;background:#f7f7f7;border-left:4px solid #c62828;font-size:14px;line-height:1.65}.cs-orderfinal-payment h2{margin:0 0 14px;font-size:20px}.cs-orderfinal-bankhero{margin:16px 0;padding:18px 0;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4}.cs-orderfinal-bankhero small{display:block;margin-bottom:4px;color:#777;text-transform:uppercase;letter-spacing:.08em;font-size:10px}.cs-orderfinal-bankhero strong{display:block;font-size:24px;overflow-wrap:anywhere}.cs-orderfinal-warning{margin:16px 0 0;padding:12px 14px;background:#fff;border:1px solid #e1d5d5;color:#5b3a3a;font-size:12px}
.cs-orderfinal-links{display:flex;flex-wrap:wrap;gap:10px 18px;padding:18px 0 0;font-size:12px}.cs-orderfinal-links a{color:#c62828;font-weight:700;text-decoration:none}.cs-orderfinal-links a:hover{text-decoration:underline}

@media(max-width:820px){.cs-orderfinal-grid{grid-template-columns:1fr}}@media(max-width:560px){.cs-orderfinal{padding:0 10px}.cs-orderfinal-hero{padding:25px 20px}.cs-orderfinal-card{padding:18px}.cs-orderfinal-meta{grid-template-columns:1fr}.cs-orderfinal-total strong{font-size:23px}}

/* includes/listwithfilter.php */
.linkleiste {
										width: 160px;
										padding: 0px;
										font-family: 'Raleway', Arial, Verdana, Helvetica, sans-serif;
										font-size: 10px;
										background-color: #e2e2e2;   /*Hintergrund Leiste*/
										margin: 0px 0px 0px 0px;
										margin-left: 0px;
										padding-top:4px;
										line-height: 20px;
									}

									.linkleiste a:link, .linkleiste a:visited {
										color: #000;
										margin-left: 0px;
										font-weight: normal;
										text-transform: none;
									}

									.linkleiste a:hover {
										font-weight: bold;
									}
									
									#VZBox01
									{
										margin-left: 0px;
									}
								
									#filterdropdown {
										padding: 0px;
										height:auto;	
									}

									.filtertext {
									background-color: transparent;
									width: 50px;
									margin: 1px;									
									text-align: center;
									line-height: 30px;}
									
							
									.filters {
										
										background-color: transparent;
										margin-left: 0px;
										margin-right: 0px;
									}

									.filterbutton {
										margin-left: 13px;
										margin-top: 10px;
										width:150px;
										font-size:14px;
										background-color: white; 
										font-family : 'Raleway', Arial, Verdana, Helvetica, sans-serif;
										border-width: 3px; 
										border-style: solid; 
										border-color: #e2e2e2; 
										border-radius: 6px; 
										box-shadow: none;
										padding:5px;
									}
											
									.filterbutton:hover {color: #666;}


								
									
									.css-checkbox { 
									position: absolute; 
									overflow: hidden; 
									clip: rect(0 0 0 0); 
									height: 1px; 
									width: 1px; 
									margin: -1px; 
									padding: 0; 
									border: 0; 
									}
									
									
									#inputPreview { 
									display: flex; 
									gap: 20px; 
									justify-content: center;	
									}

									
									.css-checkbox + label 
									{ 
									z-index: 0;
									position: relative; 
									font-size: 12px; 
									cursor: pointer; 
									display: inline-flex; 
									align-items: center; 
									height: 36px; 
									color: rgb(0, 0, 0); }


									.css-checkbox + label::before 
									{ content: \" \"; 
									display: inline-block; 
									vertical-align: middle; 
									margin-right: 2px; 
									width: 16px; 
									height: 16px; 
									background-color: white; 
									border-width: 3px; 
									border-style: solid; 
									border-color: #e2e2e2; 
									border-radius: 6px; 
									box-shadow: none; }
									
									
									.css-checkbox:checked + label::after 
									{ content: \" \";
									background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTIgNTEyIj48cGF0aCBmaWxsPSIiIGQ9Ik0yNDIuNzIgMjU2bDEwMC4wNy0xMDAuMDdjMTIuMjgtMTIuMjggMTIuMjgtMzIuMTkgMC00NC40OGwtMjIuMjQtMjIuMjRjLTEyLjI4LTEyLjI4LTMyLjE5LTEyLjI4LTQ0LjQ4IDBMMTc2IDE4OS4yOCA3NS45MyA4OS4yMWMtMTIuMjgtMTIuMjgtMzIuMTktMTIuMjgtNDQuNDggMEw5LjIxIDExMS40NWMtMTIuMjggMTIuMjgtMTIuMjggMzIuMTkgMCA0NC40OEwxMDkuMjggMjU2IDkuMjEgMzU2LjA3Yy0xMi4yOCAxMi4yOC0xMi4yOCAzMi4xOSAwIDQ0LjQ4bDIyLjI0IDIyLjI0YzEyLjI4IDEyLjI4IDMyLjIgMTIuMjggNDQuNDggMEwxNzYgMzIyLjcybDEwMC4wNyAxMDAuMDdjMTIuMjggMTIuMjggMzIuMiAxMi4yOCA0NC40OCAwbDIyLjI0LTIyLjI0YzEyLjI4LTEyLjI4IDEyLjI4LTMyLjE5IDAtNDQuNDhMMjQyLjcyIDI1NnoiLz48L3N2Zz4=\"); 
									background-repeat: no-repeat; 
									background-size: 18px 18px; 
									background-position: center center; 
									position: absolute; 
									display: flex; justify-content: center; align-items: center; 
									
									margin-left: -7px; left: 0px; top: 0px; text-align: center; 
									background-color: transparent; 
									font-size: 20px; height: 36px; width: 36px; }

/* includes/login.php */
/* Grundlayout der Checkout-Seite */
      .cs-checkout-wrapper {
        max-width: 960px;
        margin: 20px auto;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: #222;
      }

      .cs-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 20px 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        margin-top: 16px;
      }

      .cs-title-main {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .cs-title-sub {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .cs-text-muted {
        font-size: 13px;
        color: #666;
		text-align:left;
      }

      /* Login-Button + Box */
      .cs-login-toggle {
        margin-top: 12px;
        text-align: left;
      }

      .cs-btn-primary {
        background: #E72422;
        color: #fff;
        border: none;
        padding: 10px 18px;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
      }

      .cs-btn-primary:hover {
        background: #6d002e;
      }

      .cs-btn-secondary {
        background: #e0e0e0;
        color: #000;
        border: none;
        padding: 10px 18px;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
      }

      .cs-btn-secondary:hover {
        background: #cfcfcf;
      }

      /* Ein- und Ausklappen Loginbox */
      #loginForm {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease;
        margin-top: 10px;
      }

      #loginForm.cs-open {
        max-height: 500px; /* reicht dicke */
        opacity: 1;
      }

      .cs-login-box {
        background: #ffffff;
        border-radius: 8px;
        padding: 16px 18px;
        box-shadow: 0 1px 5px rgba(0,0,0,0.06);
      }

      .cs-login-box label {
        font-size: 13px;
        display: block;
        margin-bottom: 4px;
      }

      .cs-login-box input[type=text],
      .cs-login-box input[type=password] {
        width: 100%;
        padding: 8px 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 14px;
        box-sizing: border-box;
      }

      .cs-login-error {
        color: #d93025;
        font-size: 12px;
        margin-top: 4px;
      }

      /* Floating Labels / Felder */
      .cs-form-grid-2 {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .cs-form-grid-2 .cs-field {
        flex: 1 1 220px;
      }

      .cs-form-grid-1 {
        margin-top: 16px;
      }

      .cs-field {
        position: relative;
        margin-bottom: 16px;
      }

      .cs-field input,
      .cs-field select,
      .cs-field textarea {
        width: 100%;
        padding: 12px 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 14px;
        box-sizing: border-box;
        background: #fff;
      }

      .cs-field textarea {
        resize: vertical;
      }

      .cs-field label {
        position: absolute;
        left: 10px;
        top: 10px;
        padding: 0 4px;
        background: #fff;
        font-size: 12px;
        color: #777;
        pointer-events: none;
        transition: all 0.15s ease;
      }

      /* Floating-Effekt durch :placeholder-shown */
      .cs-field input:focus + label,
      .cs-field input:not(:placeholder-shown) + label,
      .cs-field select:focus + label,
      .cs-field select:not([value=""]) + label,
      .cs-field textarea:focus + label,
      .cs-field textarea:not(:placeholder-shown) + label {
        top: -8px;
        font-size: 10px;
        color: #0066cc;
      }

      .cs-small-note {
        font-size: 12px;
        color: #777;
      }

      .cs-btn-full {
        width: 100%;
        margin-top: 18px;
        padding: 12px 0;
        font-weight: 700;
        font-size: 15px;
        border-radius: 4px;
        border: none;
        background: #0066cc;
        color: #fff;
        cursor: pointer;
      }

      .cs-btn-full:hover {
        background: #0052a3;
      }

      @media (max-width: 600px) {
        .cs-card {
          padding: 16px;
        }
      }

      /* Autofill Hintergrund fix */
      input:-webkit-autofill {
        background-color: transparent !important;
        transition: background-color 5000s ease-in-out 0s;
      }
input:-webkit-autofill {
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
  }

/* content/main.php */
.flexlcentcont {
display: flex;
flex-direction:row;
justify-content:center;
background-color: transparent;
}

.flexmxitems {
background-color: transparent;
width: 40%;
margin: 10px;
text-align: center;
line-height: 40px;
font-size: 20px;
padding-bottom: 11px;
}


@media (max-width: 800px) {
.flexlcentcont {
display: flex;
flex-direction:column;
width:100%;
justify-content:center;
background-color: transparent;
}

.flexmxitems {
background-color: transparent;
width: 90%;
margin: 10px;
text-align: center;
line-height: 40px;
font-size: 20px;
padding-bottom: 11px;
}
}

/* content/konditionen.php */
:root{
      --text:#141414;
      --muted:#5f5f5f;
      --accent:#c21f39;
      --bg:#f7f7f8;
      --card:#ffffff;
      --border:#e7e7ea;
      --maxw:800px; /* fester, schmaler Hauptcontainer */
      --radius:16px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
      color:var(--text);
      background:var(--bg);
      line-height:1.65;
      font-size:17px;           /* größere Basis-Schrift */
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    img{max-width:100%; height:auto; display:block}

    .wrap{
      max-width:var(--maxw);
      margin:36px auto 40px;
      padding:0 16px;
    }

    /* Header */
    .header{ margin-bottom:18px; text-align:center; }
    .title{
      font-size: clamp(28px, 4.2vw, 38px);
      margin:0 0 6px;
      letter-spacing:.2px;
      font-weight:800;
    }
    .sub{ margin:0; color:var(--muted); font-size:clamp(16px,2.2vw,18px) }

    .badges{
      display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap;
      margin:14px 0 0;
    }
    .badges img{height:38px; width:auto; filter:saturate(.9)}

    /* Stack: nur EINSPALTIG, Cards untereinander */
    .stack{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:20px;
      box-shadow:0 1px 2px rgba(0,0,0,.05);
      width:100%;
      text-align:left;          /* explizit linksbündig */
    }

    h2{
      margin:0 0 10px;
      font-size: clamp(21px, 2.8vw, 26px);
      line-height:1.25;
    }
    h3{
      margin:16px 0 8px;
      font-size: clamp(18px, 2.4vw, 20px);
    }
    p{ margin:0 0 10px; max-width:72ch } /* angenehm lesbare Zeilenbreite */
    ul{ margin:8px 0 0 20px; padding:0 }
    li{ margin:6px 0 }

    .note{
      background:#fff7f8;
      border:1px solid #ffd7dd;
      color:#5a1a24;
      border-radius:12px;
      padding:12px 14px;
      font-size:16px;
      max-width:72ch;
    }
    .muted{ color:var(--muted) }
    .price{ font-weight:800; color:var(--accent); font-size:20px }
    .kbd{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
      background:#f3f3f5;
      border:1px solid var(--border);
      padding:.15em .5em;
      border-radius:8px;
      font-size:.95em;
    }

    .footer{
      text-align:center; color:var(--muted); font-size:14px; margin-top:20px;
    }

    /* Kleinere Bildschirme: etwas mehr Innenabstand */
    @media (max-width:480px){
      .card{ padding:18px }
    }

/* content/singlesale.php */
.gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .gallery-item {
            position: relative;
            width: 200px;
            text-align: center;
            margin-bottom: 20px;
        }

        /* Bild */
        .gallery-item img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .gallery-item img:hover {
            transform: scale(1.8);
        }

        /* Artikelnummer unter dem Bild */
        .article {
            color: black;
            font-size: 15px;
            margin-top: 5px;
        }  

		/* Preis und Größe unter dem Bild */
        .price {
            color: #E72422;
            font-size: 24px;
            margin-top: 5px;
        }

        .size {
            color: black;
            font-size: 20px;
            margin-top: 5px;
        }


        .product-textil {
            margin-bottom: 0px;
			margin-top: 2px;
            font-size: 8px;
        }
		
        .product-info {
            margin-top: 8px;
            font-size: 10px;
        }
		
      /* Bestellen-Button */
        .order-button, .inquiry-button {
            display: inline-block;
			font-size: 12px;
            background-color: #E72422;
            color: white;
            padding: 5px 16px;
            border-radius: 11px;
            cursor: pointer;
            margin-top: 10px;
        }

        .order-button:hover, .inquiry-button:hover {
            background-color: #999;
        }