/*
 Theme Name: PRBN Theme
 Theme URI: https://priban.de/
 Author: Marcel Priban
 Author URI: https://priban.de/
 Description: Ein leichtgewichtiges, modernes WordPress-Theme mit Customizer-Unterstützung.
 Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: prbn-theme
*/


/* ===========================================================
   1) Reset & Scrollbars
   - Einheitliche Box-Sizing
   - Scrollbar ausblenden (Designvorgabe)
=========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }

html { scrollbar-width: none; -ms-overflow-style: none; } /* Firefox + Legacy Edge/IE */
.no-scrollbar { -webkit-overflow-scrolling: touch; }

/* ===========================================================
   2) Fonts
=========================================================== */

@font-face {
  font-family: "mozilla-text";
  src: url("../fonts/MozillaText-VariableFont_wght.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}






/* ===========================================================
   3) Base / Utilities
   - Grundtypografie
   - Utility-Klassen
=========================================================== */
body {
  margin: 0;
  height: 100%;
  font-family: var(--font-body);
  background: var(--body-bg-color);
  color: var(--text-color-1);
  overflow-x: hidden;   /* Fallback */
  overflow-x: clip;     /* Moderne Browser – verhindert horizontales Scrollen bei Überhang */
  line-height: var(--line-height);
  font-size: var(--text-size);
}
.onepager { width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}




.std-form textarea {padding:10px !important;}

/* ===========================================================
   4) Header & Navigation
   - Sticky Header
   - Hauptnavigation & Burger
=========================================================== */
.site-header {
  position: sticky; top: 0; left: 0; right: 0;
  width: auto; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.05);
  z-index: 9999; display: flex; flex-flow: column; height: auto;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 90%; max-width: 1200px; min-height: 120px; margin: 0 auto;
}
.site-branding { width: 200px; z-index: 9999; }
.site-branding img { max-height: 60px; width: 100%; }

.site-title a {
  text-decoration: none;
  font-size: 26px;
}

.main-navigation {
  display: flex; gap: 20px; align-items: center; justify-content: space-between; width: 100%;
}
.main-navigation .main-menu {
  display: flex; gap: 12px; list-style: none; padding: 0; margin: 0 0 0 40px; z-index: 100;
}
.menu-item { text-align: center; }
.main-menu a {
  text-decoration: none; color: var(--accent-color);
  text-transform: uppercase; letter-spacing: 1px; transition: .2s ease; font-size: 12px;
}
.main-menu a.active { color: var(--accent-color-2); }

.header-buttons { display: flex; gap: 12px; justify-content: center; align-items: center; }
.header-kontakt {
  display: flex; gap: 28px; align-items: center; justify-content: center;
  width: 100%; height: 20px; background: var(--accent-color); font-size: 13px;
}


.menu-item-has-children {position:relative;}
.menu-item-has-children .sub-menu{ display:flex;
  justify-content: center;
  flex-flow: column;
  gap: 2px;
  position: absolute;
  align-items: center;
  left: 50%;
  text-decoration: none;
  list-style: none;
  padding: 8px 25px;
  transform: translate(-50%);
  background-color: var(--text-color-2);
opacity:0;
transition:0.2s all ease;}
.menu-item-has-children.hover .sub-menu{opacity:1;}

.sub-menu.hover {opacity:1;}

.oeffnungszeiten-heute-zeiten {display:none;}

.menu-item.hover a {
	color: var(--primary-color);
}



.header-kontakt a,
.header-kontakt span,
.header-kontakt .oeffnungszeiten-heute { color: var(--button-text-color-1); text-decoration: none; opacity: .75; }

/* Burger-Button (Sichtbarkeit via Breakpoints) */
.nav-toggle { display: none; border: 0; background: transparent; padding: .25rem; cursor: pointer; line-height: 0; color: currentColor; }
.burger .line { stroke: var(--accent-color); stroke-width: 2.5; stroke-linecap: round; transform-origin: 50% 50%; transition: transform .22s ease, opacity .18s ease; }

/*.produkte-ansicht-toggle { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: 8px;
  border-radius: var(--button-border-radius);
  background-color: var(--accent-color); transition:0.2s all ease;
   }


.produkte-ansicht-toggle.hover{
-webkit-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36); box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
}


.ansicht-btn { display: inline-flex; align-items: center; gap: .35rem; padding: 3px 7px; border-radius: .5rem; background: transparent; cursor: pointer; opacity: .5; }
.ansicht-btn svg path { fill: var(--button-text-color-1); }
.ansicht-btn.is-active,
.ansicht-btn:hover { opacity: 1; }*/



/* ===========================================================
   6) Layout Wrapper / Content
=========================================================== */
#main-content { position: relative; height: 100%; overflow: hidden; }

/* Default Layout-Container */
.section-wrapper {
  display: flex; justify-content: space-between; flex-flow: row;
  width: 90%; max-width: 1200px; padding: 50px 0; margin: auto;
}
.content-section { width: 50%; display: flex; align-items: center; z-index: 99; }
.content-text-wrapper { position: relative; padding: 60px; }
.content-text-wrapper h2 {
  color: var(--accent-color); font-weight: 100; font-size: 15px; text-transform: uppercase; letter-spacing: 6px;
  font-family: var(--font-accent);
}
.content-text-wrapper .wp-block-heading {
  color: var(--text-color-1); font-weight: 400; font-size: var(--h2-size); text-transform: none; letter-spacing: normal;font-family: var(--font-heading);
}
.content-text-wrapper p { font-size: var(--text-size); line-height: var(--line-height); color: var(--text-color-1); }
.headline-wrapper { display: flex; justify-content: flex-start; }
.section-icon { width: 40px; height: 40px; overflow: hidden; margin-left: 30px; border-radius: 44px; }
.section-icon img { width: 100%; height: 100%; }
.ansicht-btn { border: 1px solid var(--accent-color); }

.u-card__image:hover { box-shadow: 5px 5px 16px -1px rgba(0,0,0,.08); }
.content-image-wrapper { border-radius: var(--image-border-radius); }
.content-image.is-in-view { width: 100%; height: 100%; }

/* Border-Glow Zustände */
.content-image-wrapper.border-glow.is-in-view::before { opacity: 0; }
.content-image-wrapper.border-glow.hover::before   { opacity: 1; }
.content-image-wrapper.border-glow::before   { opacity: 0; }

.section-image.border-glow::before {opacity:0;} 

/* ===========================================================
   7) Sektion: Hero
=========================================================== */
.section-design-hero { margin-bottom: 0; }
.section-design-hero .section-wrapper { width: 100%; max-width: none; margin: 0 auto; display: block; position: relative; padding: 0; }
.section-design-hero .content-image { position: relative; width: 100%; height: auto; }
.section-design-hero .content-image-wrapper {
  width: 100%; height: auto; overflow: hidden; display: flex; max-height: 750px; justify-content: center; border-radius: var(--image-border-radius);
}
.section-design-hero .content-image-wrapper.featured { border-radius: 0; align-items: center; }
.section-design-hero .content-image-wrapper.featured:hover img { transition: .3s ease; transform: scale(1.05); }

.section-design-hero .bg-fill { position: absolute; inset: 0; background: #00000030; z-index: 3; transition: .5s ease; display: block; }
.section-design-hero .bg-fill.hover { background: transparent; }
.section-design-hero .image-1 img { width: 100%; height: auto; }
.section-design-hero .content-section  {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  z-index: 999;
  color: var(--text-color-2);
  pointer-events: all;
  transform: translate(-50%, -50%);
  float: left;
  width: 100%;
  max-width: 1200px;
  left: 50%;
	pointer-events: none;
}



.section-design-hero .content-text-wrapper {width: 50%;pointer-events: all;padding: 40px;}
.section-design-hero .wp-block-heading,
.section-design-hero .content-text-wrapper p { color: var(--text-color-2); }
.section-design-hero .wp-block-heading { font-size: 32px; }

.section-design-hero .slider-track { width: max-content; height: auto; z-index: 2; max-height: 750px; }
.section-design-hero .slider-nav { width: 100%; z-index: 10; }
.section-design-hero .slider-nav button { background: transparent; border-radius: var(--button-border-radius); padding: .5rem 1rem; font-size: 0; }

.section-design-hero .hero-slider { position: absolute; top: 190px; right: 0px; width: 350px; height: 350px; min-height: unset; z-index: 99; overflow: hidden; border-radius: var(--image-border-radius); pointer-events: all; display: none; }
.section-design-hero.mit-slideshow .hero-slider { display: flex; }
.section-design-hero .hero-slider-wrapper { height: 100% !important; }
.section-design-hero .hero-slider-wrapper .bg-fill { display: none; }
.section-design-hero .section-wrapper-hero {
  position: absolute; top: 50%; left: 50%; display: flex; justify-content: center; width: 90%; max-width: 1200px; height: 100%;
  transform: translate(-50%, -50%); z-index: 999; pointer-events: none;
}
.section-design-hero .content-image-wrapper.featured.border-glow::before { opacity: 0; }
.section-design-hero .content-image-wrapper.hero-slider-wrapper.border-glow::before { opacity: 0; }

.section-design-hero .content-image-wrapper.hero-slider-wrapper.hover {box-shadow:none;}


/* ===========================================================
   8) Sektion: Banner (klein)
=========================================================== */
.section-design-banner-small { background: var(--primary-color); color: var(--text-color-2); margin-top: 0; }
.section-design-banner-small .section-wrapper { width: 90%; height: 200px; margin: auto; justify-content: center; align-items: center; }
.section-design-banner-small .content-image { width: 120px; height: 120px; min-height: unset; }
.section-design-banner-small .content-image-wrapper { border-radius: 100px; }
.section-design-banner-small .content-section { width: auto; }
.section-design-banner-small .content-text-wrapper { padding: 0; margin-left: 20px; display: flex; }
.section-design-banner-small .headline-wrapper h2 { display: none; }
.section-design-banner-small .wp-block-heading { position: relative; top: -20px; left: -2px; color: var(--text-color-2); font-size: 22px; }
.section-design-banner-small p { position: relative; top: 20px; left: -177px; color: var(--text-color-2); }
.section-design-banner-small .wp-block-button__link { color: var(--button-text-color-2); }
.section-design-banner-small .section-icon { display: none; }
.section-design-banner-small .border-glow::before { padding: var(--ring, 0px); }

/* ===========================================================
   9) Sektion: Layout-Varianten (Switch/Center)
=========================================================== */
.section-design-switch .headline-wrapper { justify-content: flex-start; }
.section-design-switch .section-wrapper { flex-flow: row-reverse; }

.section-design-center .section-wrapper { flex-flow: column-reverse; }
.section-design-center .content-section { width: 90%; margin: auto; text-align: center; }
.section-design-center .wp-block-buttons > .wp-block-button { display: inline-block; margin: 5px auto; }
.section-design-center .headline-wrapper { display: flex; justify-content: center; flex-flow: column-reverse; align-items: center; }
.section-design-center .section-icon { margin: 8px auto; }
.section-design-center .content-image { width: 100%; }
.section-design-center .content-image-wrapper { align-items: center; height: auto; }
.section-design-center .content-image-wrapper.border-glow.hover::before { opacity:1;}

.section-design-center .content-image-wrapper .section-image { align-items: center; }
.section-design-center .section-image { max-height: 500px; }

/* ===========================================================
   10) Sektion: Produkte (Startseite)
=========================================================== 
.section-design-produkte .headline-wrapper { display: flex; justify-content: center; align-items: center; flex-flow: column-reverse; }
.section-design-produkte .section-icon { margin: 8px auto; }
.section-design-produkte .section-wrapper { flex-flow: column-reverse; }
.section-design-produkte .content-image { display: block; width: 80%; height: 500px; margin: 30px auto 0; }
.section-design-produkte .content-section { width: 100%; display: block; margin-top: 50px; }
.section-design-produkte .content-text-wrapper { padding: 0; text-align: center; }
.section-design-produkte .content-text-wrapper p { width: 80%; margin: auto; }
.section-design-produkte .produkte-nav { margin: 30px 0 50px; text-align: center; }
.section-design-produkte .produkte-nav button { background: var(--accent-color); color: #fff; border: 0; border-radius: 44px; padding: 12px; margin: 0 5px; cursor: pointer; }
.section-design-produkte .produkte-nav button:hover { background: #555; }
.section-design-produkte .u-card__meta { display: none; }
.section-design-produkte .slider-prev svg { left: 1.2%; }
.section-design-produkte .slider-next svg { right: 1.2%; }*/

/* ===========================================================
   11) Leistungen
=========================================================== */
.section-design-leistungen .section-wrapper { flex-flow: column-reverse; }
.section-design-leistungen .content-image { display: block; width: 80%; height: 500px; margin: 100px auto 0; }
.section-design-leistungen .content-section { width: 100%; display: block; margin-top: 50px; }
.section-design-leistungen .content-text-wrapper h2 { padding: 0; text-align: center; }
.section-design-leistungen .content-text-wrapper p { width: 80%; margin: auto; }
.section-design-leistungen .headline-wrapper { display: flex; justify-content: center; align-items: center; flex-flow: column-reverse; }
.section-design-leistungen .section-icon { margin: 8px auto; }
.section-design-leistungen .section-image { align-items: center; }
.section-design-leistungen .section-image img { width: 100%; height: 100%; }


/* ===========================================================
   13) Kontakt (Sektion & Seite)
=========================================================== */
.section-design-kontakt .headline-wrapper { justify-content: flex-start; }
.section-design-kontakt .content-text-wrapper .kontakt-info p,
.section-design-kontakt .content-text-wrapper p { margin: 0; padding: 0; }
.section-design-kontakt .kontakt-info { margin: 20px auto 50px; }
.section-design-kontakt .kontakt-info p { margin: 0 10px; padding: 0; }
.section-design-kontakt .content-image img { height: 100%; width: auto; }
.section-design-kontakt .section-image { align-items: center; }

.page-design-kontakt .kontakt-info { margin: 20px auto 50px; }
.page-design-kontakt .kontakt-info p { margin: 0 10px; padding: 0; }
.page-design-kontakt .kontakt-infos { display: flex; justify-content: center; }
.page-design-kontakt.single .content-text-wrapper { margin: 0 auto; }

.single .slider-prev svg {left: 1.2%;}
.single .slider-prev.hover svg {left: 0.8%;}
.single .slider-next svg {right: 1.2%;}
.single .slider-next.hover svg {right: 0.8%;}

/* ===========================================================
   14) Großes Banner
=========================================================== */
.section-design-banner { height: 400px; }
.section-design-banner .section-wrapper,
.section-design-banner .content-image { width: 100%; max-height: unset; }
.section-design-banner .section-wrapper { padding: 0; height: 100%; margin: 0; max-width: unset; }
.section-design-banner .content-section {
  position: absolute; width: 60%; justify-content: center; align-items: center;
  left: 50%; transform: translate(-50%);
}
.section-design-banner .content-image-wrapper { border-radius: 0; }
.section-design-banner .content-text-wrapper { text-align: center; }
.section-design-banner .headline-wrapper { flex-flow: column-reverse; }
.section-design-banner .section-icon { margin: auto; }
.section-design-banner .wp-block-heading, .section-design-banner p { color: var(--button-text-color-1); }
.section-design-banner .content-image { height: 100%; }
.section-design-banner .is-layout-flex { justify-content: center; }
.section-design-banner .slider-prev svg { left: 1.2%; }
.section-design-banner .slider-next svg { right: 1.2%; }
.section-design-banner .slider-prev.hover svg { left: .8%; }
.section-design-banner .slider-next.hover svg { right: .8%; }
.section-design-banner .section-image.border-glow {border-radius:0px;}

/* ===========================================================
   15) Öffnungszeiten
=========================================================== */
.oeffnungszeiten-tabelle { color: var(--text-color-1); margin-bottom: 20px; font-size: var(--text-size); }
.geschlossen { display: none; }
.oeffnungs-tag { margin: 3px auto; }

/* ===========================================================
   16) Dark Variante
=========================================================== */
.dark { background-color: var(--primary-color); padding: 1px 0; }
.dark .content-text-wrapper h2 { color: var(--button-text-color-1); }
.dark p { color: var(--button-text-color-1); }

/* ===========================================================
   17) Content-Bilder-Slider (generisch)
=========================================================== */
.slider-track { display: flex; width: max-content; height: 100%; }

.slider-nav {
  position: absolute; top: 50%; left: 0; right: 0;
  display: flex; justify-content: space-between;
  transform: translateY(-50%); pointer-events: none; z-index: 999;
}
.slider-nav button {
  pointer-events: all; border: 0; background: var(--accent-color); color: #fff;
  font-size: 0; padding: 15px 20px; cursor: pointer; display: flex; align-items: center;
}
.slider-prev svg,
.produkte-prev svg {
  width: 15px; fill: #fff; transform: rotate(180deg);
  position: absolute; left: 2.2%; transition: .2s all ease;
}
.slider-prev.hover svg { left: 1.5%; }
.slider-next.hover svg { right: 1.5%; }
.slider-next svg,
.produkte-next svg {
  width: 15px; fill: #fff; transform: rotate(0deg);
  position: absolute; right: 2.2%; transition: .2s all ease;
}
.slider-prev { border-radius: 0 12px 12px 0; }
.slider-next { border-radius: 12px 0 0 12px; }

.bg-fill { position: absolute; inset: 0; background: #00000030; z-index: 3; transition: .5s ease; display: none; }
.bg-fill:hover { background: #00000010; }

/* ===========================================================
   18) Medien / Slider-Grundlagen
=========================================================== */
.content-image { width: 50%; min-height: 450px; display: flex; }
.content-image-wrapper {
  position: relative; display: flex; overflow: hidden; width: 100%; height: 100%;
  max-height: 500px; margin: auto; border-radius: var(--image-border-radius); transition: .2s ease; justify-content: center;
}
.content-image-wrapper img { width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; }

.section-image {
  flex: 0 0 100%; min-width: 0; box-sizing: border-box; display: flex; justify-content: center;
  height: auto; border-radius: 0; max-height: 550px;background-color: var(--primary-color);
}

.section .content-image-wrapper .section-image.border-glow {border-radius:0px}

.section-image img { width: 100%; height: 100%; }

/* Border-Glow (globaler Zustand) */
.border-glow.is-in-view::before { opacity: 0; }

/* ===========================================================
   19) Highlight-Gallery
=========================================================== 
.highlight-gallery { display: grid; gap: 12px; width: 100%; }
.highlight-main { display: flex; justify-content: center; overflow: hidden; height: 500px; border-radius: var(--image-border-radius); }
.highlight-main img { width: 100%; height: 100%; display: block; object-fit: cover; }

.highlight-thumbs { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; justify-content: flex-start; margin: 40px 0; }
.highlight-thumb { width: 80px; height: 80px; padding: 0; border: 0; cursor: pointer; overflow: hidden; border-radius: var(--button-border-radius); background: none; }
.highlight-thumb img { width: 72px; height: 72px; display: block; object-fit: cover; }
.highlight-thumb.is-active { outline-offset: 2px; }
.highlight-thumb.border-glow { border-radius: 8px; }

.highlight-main.border-glow::before {opacity:0;}
.highlight-main.border-glow.hover::before {opacity:1;}


.highlight-thumb.border-glow::before {opacity:0;}
.highlight-thumb.border-glow.active::before {opacity:1;}*/

/* ===========================================================
   20) Buttons
=========================================================== */
button, input[type="button"], input[type="submit"] { -webkit-appearance: none; appearance: none; cursor: pointer; transition:0.2s all ease;}

.wp-block-button__link {
  display: flex; flex-flow: row-reverse;
  padding: 12px 45px 12px 14px; font-size: 14px; text-transform: uppercase;
  border-radius: var(--button-border-radius); transition: .2s ease; -webkit-appearance: none; appearance: none; cursor: pointer;
  font-family: var(--font-button);
}
.wp-block-button__link svg { width: 100%; height: auto; }
.wp-block-buttons > .wp-block-button { display: inline-block; margin: 5px 0; border-radius: var(--button-border-radius); }
.wp-block-button.hover .wp-block-button__link { box-shadow: 0 2px 4px rgba(0,0,0,.15); }

.is-style-primary .wp-block-button__link { background: var(--primary-color); color: var(--button-text-color-1); position: relative; }
.is-style-primary .wp-block-button__link svg { fill: var(--button-text-color-1); }

.is-style-secondary .wp-block-button__link { background: var(--secondary-color); color: var(--button-text-color-2); position: relative; display: flex; }
.is-style-secondary .wp-block-button__link svg { fill: var(--button-text-color-2); }

.is-style-line .wp-block-button__link { background: none; border: 2px solid #fff; color: #fff; position: relative; }
.is-style-line .wp-block-button__link svg { fill: #fff; }

.is-style-outline .wp-block-button__link {
  background: none; border: 2px solid var(--accent-color); color: var(--accent-color);
  position: relative; padding: 10px 43px 10px 12px; border-radius: var(--button-border-radius); transition: 1s all ease;
}
.is-style-outline .wp-block-button__link svg { fill: var(--accent-color); }
.is-style-outline .wp-block-button__link:hover { border: 2px solid color-mix(in srgb, var(--accent-color) 0%, transparent); }
.is-style-outline .wp-block-button__link::before { inset: -2px; }

.button-icon {
  width: 12px; height: 12px; position: relative; left: 105%;
  transition: .2s ease; display: flex; justify-content: center; align-items: center; top: 3px;
}
.wp-block-button.hover .button-icon { left: 110%; }
.wp-block-button.hover .wp-block-button__link {background: color-mix(in srgb, currentColor, black 60%);}

.wp-block-button.is-style-outline.hover .wp-block-button__link {background: none;}



.back-button { display: flex; margin-left: 60px; }
.back-button a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; color: var(--accent-color); text-transform: uppercase; }
.back-button .button-icon { width: 12px; height: 12px; position: relative; left: 0; display: flex; transform: rotate(180deg); transition: .2s ease; }
.back-button.hover .button-icon { left: -5%; }
.back-button .button-icon path { fill: var(--accent-color); }
.back-button svg {flex: 0 0 auto;display: flex;     width: 12px;
    height: 12px;}

.produkt-nav-wrapper .button-icon path { fill: white; }
.button { text-decoration: none; }
button:hover {background: color-mix(in srgb, currentColor, black 60%);}
.toggle-wrapper .ansicht-btn:hover {background-color:#ffffff00;}
.slider-next:hover, .slider-prev:hover {background: color-mix(in srgb, currentColor, black 80%);}

/* ===========================================================
   21) Background Art
=========================================================== */
.background-images { position: absolute; inset: 0 0 0 0; z-index: -10; opacity: .2; overflow: hidden; }
.background-images .svg-background { fill: var(--accent-color); opacity: .2; }
.background-image-1, .background-image-2 { position: absolute; width: 500px; will-change: transform; }
.background-image-1 { top: 10%; }
.background-image-2 { top: 30%; right: -200px; }

/* ===========================================================
   22) Pulse Animation
=========================================================== */
.pulse { --pulse-scale: 1.08; --pulse-duration: 5s; --pulse-opacity: .6; animation: pulse var(--pulse-duration) ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%{transform:scale(1);opacity:1} 50%{transform:scale(var(--pulse-scale));opacity:var(--pulse-opacity)} 100%{transform:scale(1);opacity:1} }

.pulse-ring { position: relative; isolation: isolate; }
.pulse-ring::after { content: ""; position: absolute; inset: -8px; border-radius: 999px; border: 2px solid currentColor; opacity: 0; animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0%{transform:scale(.8);opacity:0} 80%{transform:scale(1.3);opacity:0} 100%{transform:scale(1.3);opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .pulse, .pulse-ring::after { animation: none; }
}

/* ===========================================================
   23) Formulare (Standard)
=========================================================== */
.std-form h3, .std-form-short h3 { display: none; }
.std-form, .std-form-short { font-size: var(--text-size); color: var(--text-color-1); }

.std-form-row input {
  width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
}
.std-form-row textarea { padding: 0; border: 1px solid #ccc; border-radius: var(--button-border-radius); }
.std-form-consent-label .checkbox { width: 20px !important; min-width: unset; }
.std-form-consent-label span { font-size: 12px; text-align: left; }
.std-form-submit {
  padding: 1em 2em; background: var(--primary-color); color: var(--button-text-color-1);
  border: 0; border-radius: var(--button-border-radius); text-transform: uppercase; font-size: 14px; cursor: pointer;
}

/* ===========================================================
   24) Single Page Styles (Default + Kontakt)
=========================================================== */
.single .header-bild .content-image-wrapper { width: 100%; height: 100%; max-height: 300px; border-radius: 0; align-items: center; }
.single .header-bild .content-image-wrapper.border-glow::before { padding: var(--ring, 0px); }

.single .section-wrapper { flex-flow: column-reverse; }
.single .content-section, .single .content-image { width: 100%; }
.single .content-image-wrapper { width: 90%; max-height: none; }
.single .content-image-wrapper:hover { box-shadow: none; }
.single .section-image { height: 600px; display: flex; overflow: hidden; border-radius: var(--image-border-radius); }
.single .content-text-wrapper { width: 100%; margin: 120px auto; text-align: center; }
.single .highlight-thumbs { justify-content: center; margin: 10px 0; }
.single .highlight-thumb img { width: 100%; height: 100%; }
.single .bg-fill { display: none; }
.page-design-default.single .content-text-wrapper { margin: 0 auto; }

.content-image-wrapper.hover,
.highlight-main.hover { box-shadow: 5px 5px 16px -1px rgba(0,0,0,.08); }

.page-design-kontakt .header-bild .content-image-wrapper { width: 100%; height: 100%; max-height: 500px; border-radius: 0; }
.page-design-kontakt .section-wrapper { flex-flow: column-reverse; }
.page-design-kontakt .content-section, .page-design-kontakt .content-image { width: 100%; }
.page-design-kontakt .content-image-wrapper { width: 90%; max-height: none; border-radius: var(--image-border-radius); }
.page-design-kontakt .content-image-wrapper:hover { box-shadow: none; }
.page-design-kontakt .section-image { height: 600px; display: flex; overflow: hidden; border-radius: var(--image-border-radius); }
.page-design-kontakt .is-layout-flex { justify-content: center; }
.page-design-kontakt .kontakt-info-container { justify-content: center; }
.page-design-kontakt .std-form { width: 80%; margin: auto; }
.design-kontakt .content-text-wrapper { width: 90%; margin: auto; }


/* ===========================================================
   25) Produkt Einzelseite
=========================================================== */
.produkt-layout { display: flex; justify-content: center; align-items: center; margin-bottom: 80px; }
.produkt-content { width: 50%; }
.product-content-wrapper { padding: 60px; min-height: 380px; }
.produkt-gallery { width: 50%; }
.produkt-single { margin-top: 40px; }
.produkt-kategorien { display: flex; gap: 10px; margin-bottom: 20px; }
.produkt-kategorie {
  text-decoration: none; color: var(--accent-color); padding: 5px 10px;
  border: 1px solid var(--accent-color); border-radius: 32px; font-size: 12px;text-transform: uppercase;
}
.produkt-oberkategorien { display: flex; gap: 10px; }
.produkt-oberkategorie { text-decoration: none; color: var(--accent-color); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.produkt-single .u-card__meta { display: none; }
.produkt-single .highlight-thumbs { justify-content: flex-start; margin: 30px 0; }
.produkt-single { margin-top: 0; padding: 0; }
.produkt-single .back-button { display: flex; margin-left: 0; margin-bottom: 30px; }
.produkt-single .product-content-wrapper { padding: 0 60px; min-height: 380px; }
.produkt-single .back-button .button-icon { margin-bottom: 6px; }
.produkt-single .produkt-text p { font-size: var(--text-size); line-height: var(--line-height); }
.produkt-single .produkt-preis { color: var(--accent-color); font-size: 22px; }
.produkt-single { margin-top: 60px; }
.produkt-kategorie.border-glow::before { padding: var(--ring, 0.5px);opacity:1; }


.produkt-single .highlight-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%; /* wie hoch der Verlauf reichen soll */
  background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
  pointer-events: none; /* damit Klicks auf das Bild weiter durchgehen */
}







/* ===========================================================
   26) Suchergebnisse
=========================================================== */

.search-overview { margin: 120px auto; padding: 0; display: flex; flex-flow: column; }
.search-overview .search-archiv-header { display: block; }

.search-overview .search-archiv {
  width: 100%; margin: auto; text-align: center; padding-top: 0; transition: .2s ease;
}
.search-overview .search-grid {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin: 60px auto 0;
}
.search-overview .search-grid .content-image-wrapper { height: 300px; border-radius: var(--image-border-radius); }
.search-overview .search-grid .content-image-wrapper.hover::before { opacity: 1; }


.cat-nav {
  position: absolute; z-index: 999; width: auto; margin: auto; top: 165px;
  background-color: var(--accent-color); border-radius: var(--button-border-radius);
  display: inline-block; left: 50%; transform: translate(-50%); transition:0.2s all ease;
}

.cat-nav.hover {
-webkit-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
          box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
}

.cat-nav nav {
  display: flex; gap: 15px; padding: 12px 22px; justify-content: center; width: 100%;
}
.cat-nav a { text-decoration: none; color: var(--button-text-color-1); font-size: 14px; transition: .2s ease; opacity:0.75;}
.cat-nav a.active {opacity:1;}
.cat-nav a:hover { opacity:1; } /* Fix: Klammer entfernt */


.search-overview .search-kategorie-sektion { margin-bottom: 40px; padding-top: 20px; }
.search-overview .search-kategorie-headline { margin: 40px auto; }
.search-overview .search-teaser-title a { text-decoration: none; color: var(--text-color-1); }
.search-overview .search-teaser { width: 300px; }
.search-overview .search-teaser p { white-space: break-all; font-size: var(--text-size); }

.search-overview .search-teaser h3{font-size: 24px;margin: 20px 0px 10px;}
.search-overview .search-beschreibung h2{display: none;}
.search-overview .search-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 180px; margin: 10px auto; font-size: 14px; text-decoration: none;
}
.search-overview .search-link a {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  color: var(--accent-color); text-transform: uppercase;
}
.search-overview .search-link .button-icon {
  width: 12px; height: 12px; position: relative; left: 0; display: flex; transition: .3s ease; top: 0; justify-content: center; align-items: center;
}

.search-overview .search-link .button-icon svg {width:12px;height:12px;}

.search-overview .search-link:hover .button-icon { left: 5px; }
.search-overview .search-link .button-icon path { fill: var(--accent-color); }

.search-overview .search-preis { margin: 6px 0; color: var(--accent-color); font-size:18px; }
.search-overview .u-card__meta { display: none; }

.search-overview .back-button { margin-left: 0; height: 20px; }
.search-overview .back-button .button-icon { top: 0; }



.search-nav-wrapper {
  width: 90%; height: 50px; display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; position: absolute; top: 160px; left: 50%; transform: translate(-50%);
}
.search-nav-wrapper .back-button {
  background-color: var(--accent-color); border-radius: var(--button-border-radius);
  padding: 12px 20px; 
  margin: 0;
	transition:0.2s all ease;	
}


.search-nav-wrapper .back-button.hover {-webkit-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36); box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
}



.search-nav-wrapper .back-button a { color: white; opacity: .5; transition: .2s all ease; z-index: 999;}
.search-nav-wrapper .back-button a:hover { opacity: 1; }
.search-nav-wrapper .button-icon { top: 0; }
/*.produkt-nav-wrapper .back-button svg { fill: white; display: flex; }*/


/*.produktkategorien-nav a { transition: .2s ease; opacity: .75; }
.searchkategorien-nav a.active { opacity: 1; }*/

/* Toggle (Grid/Rows) – Container */
.toggle-wrapper { /* bewusst leer – Layout im Kontext */ }

/* Ansicht: Grid */
.search-archiv.view-grid .search-grid { display: flex; flex-flow: row wrap; justify-content: center; }

/* Ansicht: Rows */

.search-archiv.view-rows .search-preis {
  font-size: 22px;
}

.search-archiv.view-rows .search-grid {
  display: flex; flex-flow: column nowrap; gap: 1rem; width: 90%; justify-content: center;
}
.search-archiv.view-rows .search-teaser {
  display: flex; gap: 1rem; align-items: center; justify-content: flex-start; padding: 12px 22px;
  width: 80%; border-radius: var(--image-border-radius); margin: 10px auto;
}
.search-archiv.view-rows .search-teaser-media { flex: 0 0 220px; height: 220px; }
.search-archiv.view-rows .search-teaser-media img { width: 100%; height: 100%; display: block; }
.search-archiv.view-rows .content-image-wrapper { width: 100%; height: 100%; align-items: center; }
.search-archiv.view-rows .text-wrapper {
  display: flex; flex-flow: column; justify-content: flex-start; margin-left: 40px; min-width: 400px; text-align: left; align-items: flex-start; width: 100%;
}
.search-archiv.view-rows .search-link a { justify-content: flex-start; }
.search-archiv.view-rows .search-link {
  margin-top: 20px; margin-left: 0; position: relative; right: 0; justify-content: flex-end; width: 95%; bottom: 20px;
}

/* ===========================================================
   27) Suche
=========================================================== */
.search-form {
  position: relative; width: 180px;
  border: 0px solid var(--primary-color); border-radius: var(--button-border-radius); transition: .2s all ease;
}
.search-form.hover .search-form { width: 180px; }
.search-form.hover .search-field {opacity:1;width:130px;}
.search-form.hover .search-submit {background-color:color-mix(in srgb, var(--primary-color), black 30%);}


.search-field { width: 130px;
  padding: 10px;
  border-radius: var(--button-border-radius);
  font-family: var(--font-body);
  border: 2px solid var(--accent-color);
  opacity: 0;
transition: 0.2s all ease;
top: -2px;
  position: relative;}

.search-form div { display: flex; gap: 4px; justify-content: center; align-items: center; }
.search-submit {
  position: relative;
  padding: 0px;
  border: 0px;
  border-radius: var(--button-border-radius);
  background: var(--primary-color);
  color: var(--text-color-2);
  text-transform: uppercase;
  top: 2px;
  right: -3px;
  width: 44px;
  height: 44px;
	transition:0.2s all ease;
}
.search-submit svg { width: 24px;
  transition: .2s ease;
  height: 24px; }
.search-submit svg:hover { transform: scale(1.1); }
.search-submit svg path { fill: none; }

.results-grid .result-item { display: flex; margin: 40px 0; }
.result-media .content-image-wrapper { width: 300px; height: 300px; }
.result-media .content-image-wrapper img { width: 100%; height: 100%; }
.results-grid.section-wrapper { flex-flow: column; margin-top: 20px; }
.result-wrapper { width: 80%; margin: 40px; }
.result-wrapper .produkt-link { margin-top: 50px; }
.section-wrapper.search-results { margin-top: 30px; }
.archive-header { text-align: center; font-size: 12px; }
.result-title a { text-decoration: none; color: var(--text-color-1); }
.site-main { width: 100%; }
.result-wrapper .produkt-link a { margin: auto; float: right; }


.search .produkte-archiv.view-rows .pk-produktart-1 .produkt-teaser-media img {
  width: 80%;
  height: 80%;
}

.search .section-wrapper.product-overview {
	margin: 0px auto;
}




/* ===========================================================
   28) Footer
=========================================================== */
#site-footer { min-height: 300px; background: var(--secondary-color); color: #fff; padding: 40px 0; }
.footer-wrapper {
  display: flex; justify-content: space-between; width: 90%; max-width: 1200px; margin: 0 auto; padding: 20px;
}
#site-footer p { text-align: center; font-size: 12px; }

#footer-menu ul { margin: 0; padding: 0; }
#footer-menu li { list-style: none;
  margin: 11px auto;
  text-align: left; }

#footer-menu {
  padding: 0px;
  margin: 0px;
}

#footer-menu a, .footer-links a {
  color: var(--button-text-color-2); text-decoration: none; font-size: 14px; opacity: .5; transition: .3s ease;
}
.footer-links a { padding: 5px 0; }
#footer-menu a:hover, .footer-links a:hover { opacity: .8; }

.footer-links { width: auto; display: flex; flex-flow: column; margin-bottom: 80px; justify-content: flex-start; }
.footer-content { width: 25%; display: flex; flex-flow: column; }
.footer-content .oeffnungs-tag { margin: 7px auto; color: var(--primary-color); font-size: 14px; }

.kontakt-info-footer p { text-align: left !important; color: var(--primary-color); font-size: 14px !important; margin: 10px auto; }
.kontakt-info-footer a { text-align: left !important; color: var(--primary-color); font-size: 14px !important; text-decoration: none; }
.footer-content .header-buttons { justify-content: end; }

.kontakt-form-wrapper { display: flex; gap: 40px; justify-content: center; margin-top: 100px; }
.kontakt-form, .kontakt-infos-small {
  width: 50%; padding: 40px; border-radius: var(--button-border-radius); background-color: #f3f3f3;
}
.design-kontakt .kontakt-form, .design-kontakt .kontakt-infos-small {
  width: 50%; padding: 40px; background: #efefef; border-radius: var(--image-border-radius);
}
.design-kontakt .kontakt-infos { margin-top: 100px; }
.design-kontakt .seiten-content-wrapper {
  margin: auto; display: flex; flex-flow: column; justify-content: center; align-items: center;
}

/* ===========================================================
   29) Horizontale Slider-Fades (Masken)
=========================================================== */
.verlauf-links, .verlauf-rechts { position: absolute; top: 40px; height: 400px; width: 25px; z-index: 1; }
.verlauf-rechts { right: 0; }

/* ===========================================================
   30) Virtuelle Theke
=========================================================== */
.virtuelle-theke .produkt-beschreibung,
.virtuelle-theke .produkt-link,
.produkte-archiv-header h1 { display: none; }

.post-type-archive-produkt .produkte-archiv-header h1,
.tax-produkt_kategorie .produkte-archiv-header h1 { display: block; }

.virtuelle-theke .produkt-kategorie-sektion { margin: 30px auto; }
.virtuelle-theke .back-button { position: fixed; left: 40px; z-index: 999; width: 150px; top:60px; }
.virtuelle-theke .cat-nav { position: absolute; margin-top: 0; z-index: 1; }

.page-template-page-virtuelle-theke .site-header,
.page-template-page-virtuelle-theke #site-footer { display: none; }

.virtuelle-theke .toggle-wrapper { top: 40px; }
.page-template-page-virtuelle-theke .produkte-archiv { padding-top: 0; margin-top: -60px; }
.page-template-page-virtuelle-theke .produkte-archiv.view-rows .produkt-teaser { width: 80%; gap: 1rem; align-items: flex-start; justify-content: center; }
.page-template-page-virtuelle-theke .cat-nav { display:none; }
.page-template-page-virtuelle-theke .toggle-wrapper { position: fixed; top: 42px; right: 40px; }
.page-template-page-virtuelle-theke .product-overview { margin-top: 0; max-width: unset;}


.page-template-page-virtuelle-theke .produkte-archiv.view-grid .produkt-teaser {
  width: 300px;
}

.page-template-page-virtuelle-theke .produkte-archiv.view-grid .produkte-grid {
  display: flex;
  flex-flow: row wrap;
  gap: 30px;
	z-index:0;
	position:relative;
}
  






/* ===========================================================
   31) Vorbestellen (Form)
=========================================================== */
.vorbestellen .form-wrapper { width: 80%; max-width: 1200px; margin: 0 auto 100px; }
.vorbestellen .content-text-wrapper { width: 100%; }

.vorbestellen .vb-fields {
  min-width: 450px; padding: 10px 20px; display: flex; flex-flow: column; align-items: center; justify-content: center;
  border: 1px solid #ddd; border-radius: var(--button-border-radius);
}
.vorbestellen legend { padding: 0 10px; }
.vorbestellen label { width: 100%; margin: 8px; font-size: 12px; text-align: left;}

.vorbestellen input, .vorbestellen textarea {
  width: 100%; margin: 5px auto; padding: 12px;
  border: 1px solid var(--accent-color); border-radius: var(--button-border-radius);
}
.vorbestellen textarea { min-width: 200px;padding: 12px; }

.vorbestellen .vb-fields .vb-row {
  display: flex; flex-flow: row; gap: 0; width: 100%;
  margin: 0; justify-content: center; align-items: center;
}
.std-form-consent-label { display: flex; gap: 8px; align-items: flex-start; font-size: 10px; font-weight: 400; }
.vorbestellen .vb-input { margin-top: 0; }

.vorbestellen .vb-item { min-width: 450px; padding: 15px 40px; }
.vb-qty { width: auto; height: auto; }
.vb-qty input { width: 70px; margin: 0; }
.vb-qty .vb-dec, .vb-qty .vb-inc {
  border: 0; border-radius: var(--button-border-radius); padding: 12px 15px; line-height: 1rem; text-align: center;
  background: var(--accent-color); color: #fff; cursor: pointer;
}
.vb-qty .vb-dec:hover, .vb-qty .vb-inc:hover { background: #555; }

.vorbestellen .vb-actions { display: flex; justify-content: center; }
.vb-actions .wp-element-button { display: inline-block; padding: .6rem 1rem; border: 0; border-radius: .5rem; }
.vb-form .wp-block-button__link { width: 200px; margin: auto; border: 0; }

.vb-row select {
  padding: 10px; margin-top: 10px; background: #fff; border: 1px solid var(--accent-color);
  border-radius: var(--button-border-radius); font-family: var(--font-body);
}

.vorbestellen .seiten-content-wrapper { text-align: center; margin-bottom: 100px; }
.vb-title, .vb-price { font-weight: 400; font-size: var(--text-size); }

/* ===========================================================
   32) Vorbestellen Seite
=========================================================== */
.header-bild {height:300px;}



.page-design-vorbestellen .seiten-content-wrapper {margin-bottom:100px;}
.page-design-vorbestellen .content-text-wrapper {margin:20px auto; width:80%;}

.page-design-vorbestellen .form-wrapper {
  width: 80%;
  margin: auto;
}




/* ===========================================================
   32) Site News
=========================================================== */
.site-news {
  position: absolute; top: 170px; left: 50%; width: auto; height: 120px; transform: translate(-50%, 0);
  z-index: 9; text-align: center;
}
.site-news p { background: #ffffff95; padding: 10px 30px; border-radius: 44px; }



/* ===========================================================
   34) Kontakt-Infos (Icons)
=========================================================== */
.kontakt-info-container { display: flex; flex-flow: row; justify-content: flex-start; margin: 2px auto; }
.kontakt-info-icon { width: 10px; height: 10px; margin-right: 8px; }
.kontakt-info-icon path { fill: none; stroke: var(--accent-color); stroke-width: 44px; }
.kontakt-info-container a { text-decoration: none; color: var(--text-color-1); }

/* ===========================================================
   35) Diverse Kleinigkeiten
=========================================================== */
.mail .headline-wrapper { justify-content: flex-start; }
.vorbestellen .is-layout-flex { justify-content: center; width: 100%; margin: auto; }

/* ===========================================================
   36) Border-Glow (animierter Ring)
   - nutzt CSS Custom Property --sweep
=========================================================== */
/* Für sauberes Interpolieren der Winkel-Variable */
@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Ziel-Element mit Ring */
.border-glow { position: relative; border-radius: var(--image-border-radius); isolation: isolate; }

/* Maskierter Ring als Pseudo-Element */
.border-glow::before {
  content: ""; position: absolute; inset: 0; padding: var(--ring, 2px); border-radius: inherit; pointer-events: none; z-index: 5;
  background:
    conic-gradient(
      from var(--sweep),
      var(--accent-color) 0deg 270deg,
      #ffffff30 300deg,
      var(--accent-color) 360deg
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity .8s ease;
}
.border-glow.hover::before,
.border-glow.is-in-view::before { opacity: 1; animation: sweep 5s linear infinite; }
.border-glow.is-active::before { opacity: 1; animation: sweep 5s linear infinite; padding: var(--ring, 2px);  }


@keyframes sweep { to { --sweep: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .border-glow.hover::before { animation: none; }
}

/* Hover: Ring zeigen + Verlauf fahren lassen */
.border-glow.hover::before, .u-card.is-in-view .border-glow::before,.border-glow::before {
  opacity: 1;
  animation: sweep 5s linear infinite;
}


.content-image-wrapper.hero-slider-wrapper .section-image::before {opacity:0;}
.content-image-wrapper.hero-slider-wrapper.border-glow.hover::before {opacity:1;}

.content-image-wrapper.hero-slider-wrapper.border-glow.is-in-view::before {opacity:0;}
.content-image-wrapper.hero-slider-wrapper.border-glow.is-in-view.hover::before {opacity:0;}
.content-image-wrapper.hero-slider-wrapper.border-glow::before {opacity:0;}

.u-card .u-card__image-inner.border-glow.hover.is-in-view::before {opacity:1;}
.u-card .u-card__image-inner.border-glow.is-in-view::before {opacity:0;}

/* ===========================================================
   37) Produktart-Spezial-Styling (pk-produktart-1)
   - Behält bestehende Effekte bei
=========================================================== */
.pk-produktart-1 .content-image-wrapper,
.pk-produktart-1 .u-card__image {
  background-color: var(--primary-color);
  overflow: unset; align-items: center; z-index: 999;
}
.pk-produktart-1 .content-image-wrapper img,
.pk-produktart-1 .u-card__image-inner img {
  width: auto; height: 78%;width:78%; transition: .3s all ease; border-radius: var(--image-border-radius); z-index: 999;
}
.pk-produktart-1 .content-image-wrapper::before { z-index: 0; }

/* Hover-Effekt (Rotation + Shadow) */
.pk-produktart-1.hover .content-image-wrapper img,
.pk-produktart-1.hover .u-card__image-inner img {
  transform: rotate(45deg);
  -webkit-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
          box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
}


.pk-produktart-1 .content-image-wrapper.hover img,
.pk-produktart-1 .u-card__image-inner.hover img{
	transform: rotate(45deg);}

.pk-produktart-1 .u-card__image-inner.is-in-view img {transform: rotate(0deg);}

.pk-produktart-1 .u-card__image-inner.is-in-view.hover img {transform: rotate(45deg); width:80%;}


.pk-produktart-1.hover .u-card__image-inner::before {opacity:1;}


/* Row-Ansicht Bildanpassung */
.produkte-archiv.view-rows .pk-produktart-1 .produkt-teaser-media img { width: 80%; height: auto; display: block; }

/* Glow-Zustände */
.pk-produktart-1.hover .u-card__image-inner.border-glow::before { opacity: 1; z-index: 99; }
.pk-produktart-1.is-in-view .u-card__image-inner::before { opacity: 0; }

.pk-produktart-1 .content-image-wrapper img { z-index: 999; }

.u-card.is-in-view .u-card__image-inner::before {opacity: 0;}
.u-card .u-card__image-inner::before {opacity: 0;}
.u-card .u-card__image-inner.hover::before {opacity: 1;}


/* Übergang explizit lassen (bereits oben gesetzt) */
.pk-produktart-1 .content-image-wrapper img { transition: .2s all ease; }



.pagination {
  width: 200px;
  margin: 20px auto;
  font-family: var(--font-body);
}

.page-numbers.current {
  color: var(--accent-color);
}

.page-numbers {
  color: var(--button-text-color-2);
  text-decoration: none;
}

.produkt-teaser .produkt-teaser-title a {transition:all 0.2s ease;}
.produkt-teaser.hover .produkt-teaser-title a {color:var(--accent-color);}




#back-to-top {
  position: fixed;
  bottom: -120px;
  right: 20px;
  z-index: 999;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--accent-color);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
	transition:0.3s all ease;
	font-weight: 100;
}

/* sichtbar */
#back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
	bottom:20px;
}

/* Hover-Effekt */
#back-to-top:hover {
  background: #333;
}




















/* ===========================================================
   Mobile Styles (≤ 1000px)
   - Struktur: Effekte → Header/Nav → Layout → Sektionen → Seiten
   - Wichtige Fixes:
     • ".site-branding {" enthielt ein NBSP – ersetzt durch normales Leerzeichen.
=========================================================== */
@media screen and (max-width: 1000px) {

  /* =========================
     A) Globale Effekte / In-View / Produktart-Varianten
  ========================== */
  .border-glow.is-in-view::before {
    opacity: 1;
    animation: sweep 5s linear infinite;
  }
  
  .u-card.is-in-view .u-card__image-inner::before {opacity: 1;}


  .product-overview .produkte-grid .content-image-wrapper.is-in-view::before { opacity: 1; }

  .pk-produktart-1 .content-image-wrapper img { z-index: 999; }
  .pk-produktart-1 .u-card__image-inner img { z-index: 999; }

  /* Rotations-/Shadow-Effekte bei "in-view" (Content-Wrapper & Karten) */
  .pk-produktart-1 .content-image-wrapper.is-in-view img {
    transform: rotate(45deg); height: 80%;
    -webkit-box-shadow: 0px 5px 8px -4px rgba(0,0,0,0.36);
            box-shadow:   0px 5px 8px -4px rgba(0,0,0,0.36);
  }
  .pk-produktart-1.is-in-view .u-card__image-inner::before { opacity: 1; }
 
  
  .u-card .u-card__image-inner.border-glow.is-in-view::before {
  opacity: 1; 
}
  
  .pk-produktart-1 .u-card__image-inner.is-in-view  img{
    transform:rotate(45deg);
    width:80%;
    height:80%;
  }
  
  
  

  /* =========================
     B) Header & Navigation
  ========================== */
  .site-header { height: 80px; }

  .header-inner { min-height: 100%; z-index: 9999; }

  .site-branding { /* Fix: NBSP entfernt */ z-index: 9999; width: 150px; }

  .header-kontakt { display: none; }

  /* Burger / Toggle */
  .nav-toggle { display: flex; z-index: 9999; }
  .nav-toggle.is-open .burger .top { transform: translateY(4px) rotate(45deg); stroke: #982c2c; }
  .nav-toggle.is-open .burger .mid { opacity: 0; }
  .nav-toggle.is-open .burger .bot { transform: translateY(-5px) rotate(-45deg); stroke: #982c2c; }

  /* Off-Canvas Hauptnavigation */
  .main-navigation {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: -500px; width: 100%; padding: 20px;
    display: flex; flex-flow: column; justify-content: center; align-items: center;
    background: var(--body-bg-color);
    transition: .5s ease; z-index: 999; opacity: 0;
  }
  .main-navigation.is-open {
    top: 80px; background: #fff; z-index: 99; opacity: 1;
  }
  .main-navigation .main-menu { flex-flow: column; margin-right: 0; margin-left: 0; }
  .main-menu a { font-size: 18px; }

  .header-buttons { flex-flow: column; }

  /* Suche */
  .site-news { top: 15%; height: auto; font-size: 14px; }
  .search-form { width: 182px; }
  .search-field {opacity:1;}
  
  .site-news .border-glow::before {opacity:1;}
  
  
  .menu-item-has-children .sub-menu {position:relative; opacity:1;}
  .sub-menu a {font-size:14px; color: var(--primary-color);}
  
  .oeffnungszeiten-heute-zeiten {
  display: flex;
    flex-flow: column;
    font-size: 9px;
    gap: 0px;

    align-content: flex-start;
    justify-content: flex-start;
    width: 30%;}
  
  .oeffnungszeit-icon svg {
  width: 90%;
  height: 90%;
  margin: auto;
  justify-content: center;
  align-items: center;
  display: flex;
  stroke: white;
}
  
  .oeffnungszeit-icon svg path{stroke:white;}
  
  .oeffnungszeit-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oeffnungszeit-block-zeit {display: flex;
  align-items: center;
  flex-flow:column;}


.oeffnungszeit-icon{
  width: 24px;
  height: 24px;
  background-color: var(--accent-color);
  border-radius: 4px;
  display: flex;
}

.oeffnungszeit-text {
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--accent-color);
}



  
  

  /* =========================
     C) Default Layout / Grundraster
  ========================== */
  .section-wrapper { width: 100%; margin: 0; flex-flow: column; padding: 0; }
  .content-image { width: 100%; align-items: center; min-height: unset; }
  .content-image-wrapper { border-radius: 0; margin: 0; }
  .content-section,
  .text-center .content-section { width: 90%; margin: auto; }

  .content-text-wrapper { padding: 0; margin: 40px auto; max-width: 500px; }
  .is-layout-flex { justify-content: center; }

  .headline-wrapper { justify-content: center; align-items: center; flex-flow: column-reverse; }
  .content-text-wrapper .wp-block-heading,
  .content-text-wrapper p { text-align: center; }

  .section-image { height: auto; }
  .section-icon { margin: auto; }

  /* Hover-Glow auf Mobile gezielt unterdrücken */
  .content-image-wrapper.border-glow { border-radius: 0; }
  .content-image-wrapper.border-glow.hover::before { opacity: 0; }
  .content-image-wrapper.border-glow.is-in-view::before {opacity:0;}

  /* =========================
     D) Layout Switch / Center
  ========================== */
  .section-design-switch .section-wrapper { flex-flow: column; }
  .section-design-switch .section-image { align-items: center; }
  .section-design-switch .section-image.border-glow { border-radius: 0; }

  .section-design-center .section-image { align-items: center; }
  .section-design-center .section-image.border-glow { border-radius: 0; }
  .section-design-center .section-image.border-glow::before { opacity: 0; }
  .section-design-center .content-image-wrapper.border-glow.hover::before { opacity: 0; }

  /* =========================
     E) Hero (mobil)
  ========================== */
  .section-design-hero .content-image-wrapper.hero-slider-wrapper { border-radius: var(--image-border-radius); }
  .section-design-hero .content-image-wrapper.hero-slider-wrapper.is-in-view::before {opacity:1;}
  .section-design-hero .section-wrapper-hero { flex-flow: column; }
  .section-design-hero .hero-slider {
    position: relative; top: 210px; left: 50%;
    width: 250px; height: 250px; min-height: unset;
    transform: translateX(-50%); border-radius: var(--image-border-radius); overflow: hidden;
  }
  .section-design-hero .content-image-wrapper { height: 100%; }
  .section-design-hero .content-image.featured { max-height: unset; }
  .section-design-hero .content-image-wrapper.featured { height: 800px; }
  .section-design-hero .content-section { top: 280px; left: 50%; transform: translate(-50%, -50%); text-align: center; }
  .section-design-hero .headline-wrapper { justify-content: center; flex-flow: column-reverse; }
  .section-design-hero .content-text-wrapper p { width: 90%; margin: 5px auto; }

 .section-design-hero .content-text-wrapper {
  width: 100%;
  pointer-events: all;
  padding: 20px;
}
  
  
  /* =========================
     F) Banner Small
  ========================== */
  .section-design-banner-small .headline-wrapper { display: block; }
  .section-design-banner-small .section-wrapper { height: 300px; }
  .section-design-banner-small .content-text-wrapper { margin: 20px 0; flex-flow: column; }
  .section-design-banner-small .content-text-wrapper p { position: static; margin: -20px 0 10px; }
  .section-design-banner-small .content-image { position: relative; top: -40px; width: 150px; height: 150px; }
  .section-design-banner-small .content-image-wrapper { border-radius: 120px; }

  /* =========================
     G) Kontakt (Sektion)
  ========================== */
  .section-design-kontakt .headline-wrapper { justify-content: center; align-items: center; flex-flow: column-reverse; }
  .section-design-kontakt .content-image-wrapper { max-height: 280px; }
  .section-design-kontakt .content-image img { height: 100%; width: 100%; }
  .section-design-kontakt .section-image.border-glow::before { opacity: 0; }
  .section-design-kontakt .content-image-wrapper.border-glow.hover::before { opacity: 0; }

  /* =========================
     H) Team
  ========================== */
  .section-design-team .content-text-wrapper { margin: 50px auto; max-width: unset; }

  /* =========================
     I) Produkte – Sektion (Startseite)
  ========================== */
  .section-design-produkte .content-text-wrapper { max-width: none; }
  .section-design-produkte .produkte-wrapper { width: 100%; }
  .section-design-produkte .content-image-wrapper { border-radius: var(--image-border-radius); align-items: center; }
  .section-design-produkte .section-image { height: auto; border-radius: var(--image-border-radius); display: flex; }
  .section-design-produkte .section-image img { width: 100%; }

  /* Glow: global Hover aus, Sektion erlaubt wieder (wie zuvor) */
  .content-image-wrapper.border-glow.hover::before { opacity: 0; }
  .section-design-produkte .content-image-wrapper.border-glow.hover::before { opacity: 1; }

  /* Pfeilpositionen */
  .section-design-produkte .slider-prev svg { left: 10px; }
  .section-design-produkte .slider-next svg { right: 10px; }
  .section-design-produkte .slider-prev.hover svg { left: 5px; }
  .section-design-produkte .slider-next.hover svg { right: 5px; }

  /* =========================
     J) Leistungen (Sektion)
  ========================== */
  .section-design-leistungen .section-wrapper { flex-flow: column; }
  .section-design-leistungen .content-image {
    width: 100%; min-height: unset; max-height: unset; height: auto; margin: 0;
  }
  .section-design-leistungen .content-section { width: 100%; }
  .section-design-leistungen .content-text-wrapper { width: 100%; padding: 0; margin: 0 auto; max-width: unset; }
  .section-design-leistungen .slider-wrapper { width: 100%; margin-top: 0; }
  .section-design-leistungen .content-text-wrapper p { margin: 30px auto; }
  .section-design-leistungen .headline-wrapper { justify-content: center; }
  .section-design-leistungen .section-image.border-glow { border-radius: 0; }
  .section-design-leistungen .section-image.border-glow::before { opacity: 0; }

  /* Mail (Sektion) */
  .section-design-mail .section-image.border-glow { border-radius: 0; }
  .section-design-mail .content-section { margin-bottom: 50px; }
  
  

  /* =========================
     K) Seiten-Templates (Single Page)
  ========================== */
  .page-template-single-page h2 { text-align: center; }
  .page-template-single-page .section-image { height: 350px; }
  .page-template-single-page .content-image-wrapper { width: 100%; border-radius: 0; }
  .page-template-single-page .section-image { width: 100%; border-radius: 0; }
  .page-template-single-page .section-image.border-glow::before { opacity: 0; }
  
  
  
  
  
  .page-design-vorbestellen .form-wrapper {
  width: 100%;
  margin: auto;
}
  

  .virtuelle-theke .back-button {
position: fixed;
  left: 25px;
  z-index: 999;
  width: 150px;
  top: 76px;  
  } 
  
    .virtuelle-theke .back-button a{
font-size:12px; 
  } 
  
.virtuelle-theke .ansicht-btn {
  border: 0px solid var(--accent-color);
  gap: 0px;
  margin: 0px;
  padding: 0px;
  top: 20px;
}
  
.page-template-page-virtuelle-theke .toggle-wrapper {
  position: fixed;
  top: 56px;
  right: 22px;
  left: unset;  
  width: 65px;
  } 
  
.virtuelle-theke .produkte-archiv.view-rows .text-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  margin-left: 10px;
  min-width: unset;
  text-align: left;
  align-items: flex-start;
  width: 100%;
} 
  
.virtuelle-theke .produkte-archiv.view-rows .produkt-teaser-media {
  flex: 0 0 120px;
  height: 120px;
} 
  
  
  
  
  
  

  /* =========================
     L) Produkt-Übersicht (Archive)
  ========================== */
  .product-overview .produkte-grid .content-image-wrapper {
    height: 280px; width: 280px; margin: auto;
  }
  .produkte-archiv.view-rows .produkte-grid .content-image-wrapper {
    height: 120px; width: 120px; margin: auto; border-radius: var(--button-border-radius);
  }
  .produkte-archiv.view-rows .pk-produktart-1 .produkt-teaser-media img {
    width: 80%; height: auto; display: block; border-radius: var(--button-border-radius);
  }
  .produkte-archiv.view-rows .produkt-teaser { padding: 0; }
  .produkte-archiv.view-rows .produkt-teaser-media { flex: 0 0 10%; height: auto; }

  .produkt-nav-wrapper {
    width: 90%; height: 50px; display: flex; justify-content: space-between; align-items: center;
    max-width: 1200px; position: absolute; top: 140px; left: 50%; transform: translate(-50%);
  }
  .product-overview .produkt-teaser p { font-size: 12px; }

  .toggle-wrapper {
    top: 150px; left: 90%; transform: translateX(-50%);
    width: 100px; max-width: 1200px; margin-right: -40px;
  }
  .produkte-ansicht-toggle { float: none; }

  /* =========================
     M) Produkt-Einzelseite (Single)
  ========================== */
  .produkt-single { margin-top: 0; }
  .produkt-single .highlight-main { border-radius: 0; height: 400px; }
  .produkt-single .highlight-main.border-glow::before { opacity: 0; }

  .produkt-single .produkt-content .back-button {
    margin: 0; position: relative; top: -30px; display: flex;
  }

  .produkt-single .highlight-thumbs {
    position: absolute; top: 308px; left: 50%; transform: translateX(-50%); justify-content: center;
  }

  .produkt-single .product-content-wrapper { padding: 30px 20px; min-height: 380px; }
  .produkt-single .back-button a { z-index: 999; font-size: 12px; }

  /* Kontakt-Seite (Single) Abstände */
  .page-design-kontakt.single .content-text-wrapper { margin: 40px auto; }
  .page-design-default.single .content-text-wrapper { margin: 40px auto; }

  /* Form/Infos (Kontakt-Bereich) */
  .kontakt-form, .kontakt-infos-small { width: 100%; }
  .kontakt-infos .kontakt-form { background-color: #fff0; }
  .kontakt-infos .kontakt-infos-small { background-color: #fff0; }
  .page-design-kontakt .std-form { width: 100%; margin: auto; }

  /* =========================
     N) Footer & allgemeine Blöcke
  ========================== */
  .footer-wrapper { flex-flow: column; }
  .footer-content { width: 100%; }

  .text-right-dark .content-image-wrapper,
  .text-left-dark  .content-image-wrapper { width: 100%; height: 100%; border-radius: 0; }
  .text-left-dark .section-wrapper { flex-flow: column-reverse; margin: 0; }

  .produkte-archiv.view-rows .produkt-teaser { width: 100%; }
  .produkte-archiv.view-rows .produkt-link { left: 0; }
  .produkte-archiv.view-rows .text-wrapper { min-width: unset; margin-left: 10px; }
  .produkte-archiv.view-rows .produkt-teaser-title { margin: 0; }
  .produkte-archiv.view-rows .produkt-beschreibung p { margin: 2px 0; }

  .single-produkt { width: 100%; }
  .single-produkt .produkt-layout { flex-flow: column; }

  .produkt-gallery { width: 100%; }
  .produkt-content { width: 100%; margin-top: 50px; }
  .produkte .content-text-wrapper p { width: 60%; }

  .cat-nav {
    top: 80px; left: 50%; transform: translateX(-50%);
    width: 100%; margin: auto; display: flex; justify-content: center; border-radius: 0;
  }

  .product-content-wrapper { padding: 20px; min-height: 380px; }

  .produkt-kategorien,
  .produkt-oberkategorien { justify-content: center; }
  .produkt-oberkategorien { margin-top: 20px; }

  .produkt-title, .produkt-preis, .produkt-text { text-align: center; }
  .view-rows .produkt-title, .view-rows .produkt-preis, .view-rows .produkt-text { text-align: left; }

  .produkt-content .highlight-thumb { width: 40px; height: 40px; }

  .produkte-liste { gap: 20px; }

  .kontakt-form-wrapper { flex-flow: column; }
  .std-form-consent-label span { width: 100%; }

  .design-kontakt .kontakt-form,
  .design-kontakt .kontakt-infos-small { width: 100%; padding: 15px; border-radius: var(--image-border-radius); }

  .std-form-row label { display: block; margin-bottom: 6px; }
  .std-form-submit { position: absolute; left: 50%; transform: translateX(-50%); }

  .design-kontakt .content-image { margin-top: 40px; }
  .menu-item { margin: 4px auto; }
  .header-buttons .wp-block-button__link { padding: 1em 4.5em 1em 3em; }
  .wp-block-heading { margin-top: 0; }

  .product { padding: 15px 0; }
  .team .team-bild { width: 160px; height: 160px; margin: 20px auto; }

  .text-left-dark, .text-right-dark { width: 100%; background: var(--primary-color); padding: 0; }
  .headline-wrapper { text-align: center; }

  .text-center .content-image { width: 100%; margin: auto; text-align: center; }

  .vorbestellen .form-wrapper { width: 100%; }
  .vorbestellen .vb-item { min-width: unset; padding: 10px; }
  .vorbestellen .vb-fields { min-width: unset; padding: 10px 30px; }
  .vb-fields legend h2 { font-size: 12px; text-align: left; }
  .vorbestellen legend { padding: 0; }
  .vorbestellen .vb-fields .vb-row { flex-flow: column; }
  .vorbestellen .section-wrapper { margin-bottom: 60px; }

  .text-right-dark .section-wrapper,
  .text-left-dark  .section-wrapper { width: 100%; }

  .slider-bilder { width: auto; }

  .produkte-archiv .content-image-wrapper { width: 100%; height: auto; border-radius: var(--image-border-radius); }

  .text-right-dark .content-text-wrapper,
  .text-left-dark  .content-text-wrapper { padding: 10px; }

  .mail .std-form-row { width: 90%; margin: 10px auto; }
  .headline-wrapper { justify-content: center; }

  .kontakt-info-container { justify-content: center; }
  h3 { text-align: center; }
  .oeffnungs-tag { text-align: center; }
  .kontakt-info-icon { margin-right: 12px; }

  /* Bild-Transitions (Produktart 1) */
  .pk-produktart-1 .content-image-wrapper img { transition: .5s all ease; transform: rotate(0deg); }
  .pk-produktart-1.is-in-view .content-image-wrapper img { transform: rotate(45deg); }

  /* Seitenbreite */
  .seiten-content-wrapper { width: 90%; margin: auto; }

  
  .cb-banner {

  width: 90%;
  height: 280px;
}
  
  .cb-reopen {
  float: none;
  margin-top: 60px;
  margin: auto;
  position: relative;
  left: 0%;
    transform: translate(0%);
}