.hover-visible {
    display: none;
}


/* =========================
   KONTAKTFORMULAR – CLEAN
   ========================= */

/* ---- Layout / Reset (ohne Checkbox/Radio) ---- */
form { max-width: 1000px; padding: 0 15px; margin: 0 auto; }

:where(input:not([type="checkbox"],[type="radio"]), textarea, select, button) {
  border: none; outline: none; box-shadow: none; background: transparent;
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 1rem; color: #333; padding-left: 1em;
}

textarea { height: 100px; }

/* Autofill neutralisieren */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Browser-UI entfernen: Zahl / Suche / IE-Select */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
select::-ms-expand { display: none; }

/* ---- Standard-Input (Text, Mail, etc.) ---- */
.form-control {
  width: 100%;
  padding: 1.14rem 0.75rem 0.6rem;
  border: 1px solid var(--clr-orange);
  border-radius: 18px;
  background: #fff; color: #333;
  transition: border-color .2s ease, box-shadow .2s ease;
  position: relative; z-index: 1;
}
.form-control:focus { border: 2px solid var(--clr-orange); }

/* ---- Floating Labels ---- */
.form-group { position: relative; margin-bottom: 2rem; }

.form-label {
  position: absolute; top: 1rem; left: 0.75rem;
  background: #fff; padding: 0 .3rem;
  color: #666; font-size: 1rem; pointer-events: none;
  transition: all .2s ease; z-index: 2;
}
.form-group.active .form-label {
  top: -0.6rem; left: 0.5rem;
  font-size: .75rem; color: var(--clr-orange);
}

/* ---- Buttons ---- */
button{
  display:flex; align-items:center; justify-content:center;
  text-transform:uppercase; background:#fff;
  border:.2em solid var(--clr-orange); border-radius:8px;
  padding:5px 10px; transition:background-color .3s, color .3s;
  font-size:var(--step-0); font-weight:600; color:var(--clr-orange); text-decoration:none;  font-family: var(--thm-text);
}
button:hover{ background:var(--clr-orange); color:#fff; }

/* ---- Helper ---- */
.clearfix{ position:relative; margin-bottom:2em; }
.clearfix p{ font-size:1rem; color:#666; float:right; }

/* ---- Selects ---- */
select.form-control{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:#fff; border:1px solid var(--clr-orange); border-radius:18px;
  padding:1.14rem 2rem 0.6rem 1em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='%23f97316' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:.65rem;
  color:#333; cursor:pointer;
}

/* =========================
   OPTION-GRUPPEN (Radio/Checkbox)
   ========================= */

/* Rahmen + Padding für beide Gruppenarten */
.form-group.is-options{
  position:relative;
  padding:.9rem .9rem .6rem;
  border:1px solid var(--clr-orange);
  border-radius:18px; background:#fff;
}

/* Label IMMER hochgezogen – unabhängig von Verschachtelung */
.form-group.is-options .form-label{
  position:absolute;
  top:-0.6rem; left:.5rem;
  font-size:.75rem; color:var(--clr-orange);
  background:#fff; padding:0 .3rem; z-index:2;
}

/* Abstand zwischen Label und Liste */
.form-group.is-options .inputs-list{ margin-top:.2rem; }

/* Falls TYPO3 in der Liste nochmals .form-group erzeugt → neutralisieren */
.form-group.is-options .inputs-list .form-group{
  margin:0; padding:0; border:0; background:transparent;
}

/* Zeilenlayout der Optionen */
.inputs-list .form-check{
  display:flex; align-items:center; gap:.6rem;
  margin:.4rem 0;
}

/* =========================
   RADIOS – custom (Kreis + Punkt)
   ========================= */

.inputs-list input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  inline-size:1.2rem; block-size:1.2rem;
  border:2px solid var(--clr-orange); border-radius:50%;
  background:#fff; margin:0; cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.inputs-list input[type="radio"]::before{
  content:""; inline-size:.6rem; block-size:.6rem; border-radius:50%;
  background:var(--clr-orange); transform:scale(0);
  transition:transform .2s ease-in-out;
}
.inputs-list input[type="radio"]:checked::before{ transform:scale(1); }
.inputs-list input[type="radio"]:focus{ box-shadow:0 0 0 3px rgba(249,115,22,.25); }
.inputs-list .form-check-label span{ font-size:1rem; color:#333; cursor:pointer; }

/* =========================
   CHECKBOXEN – custom (für später)
   ========================= */

.checkbox-row{ display:flex; align-items:center; gap:.6rem; margin:.6rem 0; }

/* echtes Input verstecken, aber bedienbar */
.checkbox-row input[type="checkbox"]{
  position:absolute; opacity:0; inline-size:0; block-size:0; margin:0;
}

/* visuelle Box */
.checkbox-row .checkmark{
  inline-size:1.2rem; block-size:1.2rem;
  border:2px solid var(--clr-orange); border-radius:.35rem;
  background:#fff; display:inline-grid; place-items:center;
  transition:background-color .2s, border-color .2s, box-shadow .2s;
}
.checkbox-row .checkmark::after{
  content:""; inline-size:.7rem; block-size:.7rem;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath fill='%23000' d='M5 7.3L1.8 4.1 0 5.9 5 10l9-9L12.2 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:#fff; opacity:0; transform:scale(.6);
  transition:opacity .15s, transform .15s;
}
.checkbox-row input[type="checkbox"]:checked + .checkmark{
  background:var(--clr-orange); border-color:var(--clr-orange);
}
.checkbox-row input[type="checkbox"]:checked + .checkmark::after{
  opacity:1; transform:scale(1);
}
.checkbox-row input[type="checkbox"]:focus + .checkmark{
  box-shadow:0 0 0 3px rgba(249,115,22,.25);
}
.checkbox-row label{ font-size:1rem; color:#333; cursor:pointer; }

/* ---- Focus-Ring global neutralisieren ---- */
:where(input, textarea, select, button):focus,
:where(input, textarea, select, button):focus-visible{ outline:none; }

.form-control:focus,
select.form-control:focus{ outline:none; box-shadow:none; border:2px solid var(--clr-orange); }

.inputs-list input[type="radio"]:focus,
.checkbox-row input[type="checkbox"]:focus{ outline:none; }






/* COOKIE BANNER */

/* Klickbar & ganz oben */
#cookie-consent { position: relative; z-index: 99999; }
#cookie-consent, #cookie-consent * { pointer-events: auto; }

/* Glücksbeute-Theme */
#cookie-consent {
  --gb-text: var(--thm-text, #74727a);
  --gb-accent: var(--clr-orange, #ffaa81);
  --gb-ghost: color-mix(in srgb, var(--clr-orange) 20%, transparent);
  --gb-radius: 10px;
  --gb-shadow: 0 20px 40px rgba(0,0,0,.08);
}
#cookie-consent .consent-modal,
#cookie-consent .cookie-wrapper {
  background:#fff; color:var(--gb-text);
  border-radius:var(--gb-radius);
  box-shadow:var(--gb-shadow);
  border:1px solid color-mix(in srgb, var(--gb-accent) 20%, #eee);
}

/* Buttons (Klassen können je nach Template abweichen) */
#cookie-consent .btn-primary,
#cookie-consent .accept,
#cookie-consent button[type="submit"] {
  position:relative;
  background:var(--gb-accent);
  border:2px solid var(--gb-accent);
  color:#fff; border-radius:6px;
  font-family:var(--thm-b-font, inherit);
  text-transform:uppercase; letter-spacing:.08em;
  transition:all .25s ease;
}
#cookie-consent .btn-primary:hover,
#cookie-consent .accept:hover,
#cookie-consent button[type="submit"]:hover {
  background:#fff; color:var(--gb-accent);
}
#cookie-consent .btn-secondary,
#cookie-consent .deny,
#cookie-consent .show-details {
  background:#fff; color:var(--gb-accent);
  border:2px solid var(--gb-accent);
  border-radius:6px; text-transform:uppercase;
  letter-spacing:.08em; transition:all .25s ease;
}
#cookie-consent .btn-secondary:hover,
#cookie-consent .deny:hover,
#cookie-consent .show-details:hover {
  background:var(--gb-ghost);
}

/* Footer-Links */
#cookie-consent .footer-links a { color:var(--gb-accent); text-decoration:underline; }
#cookie-consent .footer-links a:hover { opacity:.9; }






/* 1) Box soll mit Inhalt mitwachsen */
.services-section-three .service-block-two .inner-box {
  height: auto !important;
  min-height: 0 !important;
  display: flex;               /* optional, für sauberes Layout */
  flex-direction: column;      /* optional */
}

/* 2) Kurve/Overlay verursacht oft die „zu kurze“ Box – erstmal ausschalten */
.services-section-three .service-block-two .bottom-curve {
  display: none !important;
}

/* 3) Bilder responsiv halten */
.services-section-three .service-block-two .icon-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4) (Optional) keine „Lücken“ im Fließtext durch Block-Justify */
.services-section-three .service-block-two .text {
  text-align: left;            /* statt justify */
  /* overflow-wrap: anywhere;  // bei sehr langen Wörtern hilfreich */
}



/* NUMMERIERUNG */

/* === Counter-Logik wie bei .process-one === */
.frame--steps { counter-reset: processCount; }
/* TYPO3 setzt "frame-" Präfix -> beide Varianten abdecken */
.frame--steps .frame-frame--process-badge,
.frame--steps .frame--process-badge { counter-increment: processCount; }

/* === An TYPO3 Bild-Wrapper andocken & Überstand erlauben === */
.frame--steps .frame-frame--process-badge figure,
.frame--steps .frame--process-badge figure,
.frame--steps .frame-frame--process-badge .ce-gallery,
.frame--steps .frame--process-badge .ce-gallery,
.frame--steps .frame-frame--process-badge .image,
.frame--steps .frame--process-badge .image {
  position: relative;
  display: inline-block;
  margin-bottom: 50px;        /* mobile wie im Original */
  border-radius: 8px;
  background: var(--thm-black, #000);
  overflow: visible !important;
  z-index: 1;
}
@media (min-width: 992px){
  .frame--steps .frame-frame--process-badge figure,
  .frame--steps .frame--process-badge figure,
  .frame--steps .frame-frame--process-badge .ce-gallery,
  .frame--steps .frame--process-badge .ce-gallery,
  .frame--steps .frame-frame--process-badge .image,
  .frame--steps .frame--process-badge .image {
    margin-bottom: 0;
  }
}

/* Bild selbst wie im Original */
.frame--steps .frame-frame--process-badge img,
.frame--steps .frame--process-badge img {
  max-width: 100%;
  border-radius: 8px;
  position: relative;
  /* optional – nur wenn du den entsättigten Look willst: */
  mix-blend-mode: luminosity;
}

/* === Größen/Farben aus deinem CSS als Variablen === */
:root{
  --proc-disk-m: 200px;         /* mobile große Scheibe */
  --proc-disk-d: 387px;         /* desktop große Scheibe */
  --proc-badge-m: 60px;         /* mobile Nummer-Badge */
  --proc-badge-d: 128px;        /* desktop Nummer-Badge */
  --proc-bg: #f4f5f8;           /* große helle Scheibe */
  --proc-badge: var(--clr-orange, #FFB33E);  /* Badgefarbe */
  --proc-text: var(--thm-black, #111);       /* Text in Badge */
}

/* === Große Scheibe (entspricht .process-one__image::before) === */
.frame--steps .frame-frame--process-badge figure::before,
.frame--steps .frame--process-badge figure::before,
.frame--steps .frame-frame--process-badge .ce-gallery::before,
.frame--steps .frame--process-badge .ce-gallery::before,
.frame--steps .frame-frame--process-badge .image::before,
.frame--steps .frame--process-badge .image::before{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--proc-bg);
  width: var(--proc-disk-m);
  height: var(--proc-disk-m);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 992px){
  .frame--steps .frame-frame--process-badge figure::before,
  .frame--steps .frame--process-badge figure::before,
  .frame--steps .frame-frame--process-badge .ce-gallery::before,
  .frame--steps .frame--process-badge .ce-gallery::before,
  .frame--steps .frame-frame--process-badge .image::before,
  .frame--steps .frame--process-badge .image::before{
    width: var(--proc-disk-d);
    height: var(--proc-disk-d);
    top: 50%;
  }
}

/* === Nummer-Badge (entspricht .process-one__image::after) === */
.frame--steps .frame-frame--process-badge figure::after,
.frame--steps .frame--process-badge figure::after,
.frame--steps .frame-frame--process-badge .ce-gallery::after,
.frame--steps .frame--process-badge .ce-gallery::after,
.frame--steps .frame-frame--process-badge .image::after,
.frame--steps .frame--process-badge .image::after{
  content: counters(processCount, "", decimal-leading-zero);
  position: absolute;
  display: flex; justify-content: center; align-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--proc-badge);
  color: var(--proc-text);
  font-family: var(--thm-font, inherit);
  font-weight: 700;
  width: var(--proc-badge-m);
  height: var(--proc-badge-m);
  top: 20%; left: 20%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  padding-top: 5px; /* wie im Original */
}
@media (min-width: 992px){
  .frame--steps .frame-frame--process-badge figure::after,
  .frame--steps .frame--process-badge figure::after,
  .frame--steps .frame-frame--process-badge .ce-gallery::after,
  .frame--steps .frame--process-badge .ce-gallery::after,
  .frame--steps .frame-frame--process-badge .image::after,
  .frame--steps .frame--process-badge .image::after{
    width: var(--proc-badge-d);
    height: var(--proc-badge-d);
    top: 50%;
    font-size: 50px;
    padding-top: 12px;
  }
}

/* === Desktop-Ausrichtung wie bei .row:nth-child(even) … ===
   Wir orientieren uns an deiner Spaltenstruktur:
   .left-content  -> Kreise nach links raus
   .right-content -> Kreise nach rechts raus
*/
@media (min-width: 992px){
  /* links */
  .frame--steps .left-content .frame-frame--process-badge figure::before,
  .frame--steps .left-content .frame--process-badge figure::before,
  .frame--steps .left-content .frame-frame--process-badge .ce-gallery::before,
  .frame--steps .left-content .frame--process-badge .ce-gallery::before,
  .frame--steps .left-content .frame-frame--process-badge .image::before,
  .frame--steps .left-content .frame--process-badge .image::before{
    left: 0; transform: translate(-50%, -50%);
  }
  .frame--steps .left-content .frame-frame--process-badge figure::after,
  .frame--steps .left-content .frame--process-badge figure::after,
  .frame--steps .left-content .frame-frame--process-badge .ce-gallery::after,
  .frame--steps .left-content .frame--process-badge .ce-gallery::after,
  .frame--steps .left-content .frame-frame--process-badge .image::after,
  .frame--steps .left-content .frame--process-badge .image::after{
    left: 0; transform: translate(-50%, -50%);
  }

  /* rechts */
  .frame--steps .right-content .frame-frame--process-badge figure::before,
  .frame--steps .right-content .frame--process-badge figure::before,
  .frame--steps .right-content .frame-frame--process-badge .ce-gallery::before,
  .frame--steps .right-content .frame--process-badge .ce-gallery::before,
  .frame--steps .right-content .frame-frame--process-badge .image::before,
  .frame--steps .right-content .frame--process-badge .image::before{
    right: 0; left: auto; transform: translate(50%, -50%);
  }
  .frame--steps .right-content .frame-frame--process-badge figure::after,
  .frame--steps .right-content .frame--process-badge figure::after,
  .frame--steps .right-content .frame-frame--process-badge .ce-gallery::after,
  .frame--steps .right-content .frame--process-badge .ce-gallery::after,
  .frame--steps .right-content .frame-frame--process-badge .image::after{
    right: 0; left: auto; transform: translate(50%, -50%);
  }
}


/* SHOP */
.cart_form {
  display: none;
}


.tx-cart-products ul {
  padding-left: 20px;
}
.tx-cart-products ul li {
  list-style: circle;
}




/* --- Product Detail Layout (beuteseite) --- */

.cartproducts-detail .product-title {
  margin-bottom: 1rem;
}

.cartproducts-detail .product-hero {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
  .cartproducts-detail .product-hero__media {
    max-width: 520px; /* nach Geschmack 420–560px */
  }
}

@media (max-width: 900px) {
  .cartproducts-detail .product-hero {
    grid-template-columns: 1fr;
  }
}

.cartproducts-detail .product-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.cartproducts-detail .media-thumbs {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cartproducts-detail .media-thumbs img {
  display: block;
  max-width: 120px;
  height: auto;
}

.cartproducts-detail .product-hero__teaser .teaser {
  /* Optional etwas typografische Absetzung */
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Tags */
.cartproducts-detail .product-tags {
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cartproducts-detail .product-tag {
  background: #f2f3f5;
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
}

/* Optional kleine Abstände unten */
.cartproducts-detail .product-description { margin-bottom: 1.5rem; }
.cartproducts-detail .related-products   { margin-top: 2rem; }


/* überschreibt .tx-cart-products img aus der Extension */
.tx-cart-products .cartproducts-card__image img {
  width: 100%;
  height: auto;
  max-width: none; /* verhindert unerwartetes Downscaling */
  border-radius: 8px; /* falls du die Rundung behalten willst */
}


.tx-cart-products .cartproducts-card { margin-bottom: 2rem; }