/* Starke Fettschrift für Labels in Produktdetails */
.details-section .bold {
  font-weight: bold;
}
/* Fett für i18n-Labels (Messprinzip, Anwendungsbereiche etc.) */
.bold {
  font-weight: bold;
}
/* Ensure product container does not introduce horizontal scroll by default */
.products-inner {
  overflow-x: visible;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* --- Corporate Identity: Modern, eigenständig --- */
:root {
  /* Core palette per brief */
  --main-bg: #F5F5F5;          /* light grey backgrounds */
  --main-petrol: #0A2342;      /* primary dark blue for headings */
  --deep-blue: #05162E;        /* deep blue for large backgrounds (header/footer) */
  --main-petrol-mid: #123456;  /* mid blue for hover contrasts in dark areas */
  --main-petrol-light: #164B7A; /* lighter petrol accent */
  --error-border: var(--main-orange);
  --error-bg: color-mix(in oklab, var(--main-orange) 4%, white 96%);
  --error-shadow: 0 0 0 3px rgba(255,111,60,0.15);
  --error-shadow-focus: 0 0 0 3px rgba(255,111,60,0.25);

  --main-orange: #FF6F3C;      /* CTA signal orange */
  --main-orange-dark: #E65B2B; /* darker orange for hover on CTAs */
  --accent-turquoise: #007B8F; /* turquoise for icons, links, highlights */

  --main-white: #FFFFFF;
  --main-grey: #23272f;        /* body text (updated for readability) */
  --main-midgrey: #B0BEC5;     /* mid grey (kept) */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 10px rgba(10, 35, 66, 0.06);
  --shadow-md: 0 6px 24px rgba(10, 35, 66, 0.10);
  --shadow-lg: 0 12px 40px rgba(10, 35, 66, 0.16);

  --focus-ring: 0 0 0 3px rgba(0, 123, 143, 0.35); /* turquoise focus for a11y */

  --text-on-accent: #FFFFFF;   /* text on CTA/orange backgrounds */
  --text-on-primary: #FFFFFF;

  --layout-max: 1150px; /* unified content width matching hero */
  --gutter: 1.5rem; /* horizontal page gutter */
  --gutter-mobile: 1rem; /* mobile page gutter für bessere Sicherheitsabstände */
  --form-field-gap: .35rem;
}

html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: auto; /* Disable to prevent conflicts with JS smooth scroll */
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--main-bg);
  color: var(--main-grey);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Service hero: eigenes Layout & deutlich kleineres Bild (keine Auswirkung auf Index-Hero) */
.service-hero .container { display:flex; gap:2.2rem; align-items:center; justify-content:space-between; }
.service-hero .col { flex:1 1 0; }
.service-hero .hero-media { flex:0 0 auto; }
.service-hero-image {
  width:auto;
  max-width:320px;
  max-height:220px;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0;
}
/* Text-basiertes Hero Image (@ Symbol) - Responsive Font Sizing */
.hero-device-image.service-hero-image {
  font-size: 12rem !important;
  line-height: 0.9 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 240px;
}
@media (max-width: 900px) {
  .hero-device-image.service-hero-image {
    font-size: 11rem !important;
    max-height: 210px;
  }
}
@media (max-width: 700px) {
  .hero-device-image.service-hero-image {
    font-size: 9rem !important;
    max-height: 180px;
  }
}
@media (max-width: 600px) {
  .hero-device-image.service-hero-image {
    font-size: 7.5rem !important;
    max-height: 150px;
  }
}
@media (max-width: 500px) {
  .hero-device-image.service-hero-image {
    font-size: 6.5rem !important;
    max-height: 130px;
  }
}
@media (max-width: 400px) {
  .hero-device-image.service-hero-image {
    font-size: 5.5rem !important;
    max-height: 110px;
  }
}
/* Service page section spacing and assistant card layout */
#service-assistant { 
  padding: 0 1.25rem 0 1.25rem; 
  margin-top: 2.6rem; /* increased separation from hero for consistent vertical rhythm (index hero ~2.5rem) */
}
@media (max-width: 900px){
  #service-assistant { padding: 0 .95rem; margin-top: 2.1rem; }
}
/* Add larger separation above benefits to avoid sections sticking together */
section.benefits-section { margin-top: 2.4rem; }
/* Ensure benefits section inner spacing if not already present */
section.benefits-section .inner { padding-top: .4rem; }
/* Slightly reduce gap inside service assistant radio grid for tighter vertical rhythm */
#service-assistant div[style*="display: grid"][style*="gap: 0.6rem"] { gap: .5rem !important; }
@media (max-width: 1050px) { .service-hero-image { max-width:280px; max-height:200px; } }
@media (max-width: 900px) {
  .service-hero .container { flex-direction:column; gap:1.4rem; }
  .service-hero-image { max-width:260px; max-height:190px; }
}
@media (max-width: 600px) { .service-hero-image { max-width:220px; max-height:170px; } }

h1 {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 3rem);
}
h2 {
  font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2.2rem);
}
h3 {
  font-size: clamp(1.2rem, 1rem + 0.4vw, 1.5rem);
}

a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: var(--accent-turquoise);
}

a:hover, a:focus {
  color: color-mix(in oklab, var(--accent-turquoise) 82%, black 18%);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}

/* Center header content vertically and align nicely */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, color-mix(in oklab, var(--deep-blue) 96%, white 4%), var(--deep-blue));
  border-bottom: 1px solid color-mix(in oklab, var(--deep-blue) 70%, white 30%);
  color: var(--main-white);
  padding: 0.3rem var(--gutter);
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  position: relative;
  min-height: 144px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 0.6rem;
}
.header-row {
  width: 100%;
  max-width: 1100px;
  align-items: center;
}
header > nav {
  width: 100%;
}
header > nav ul {
  justify-content: center;
}
@media (min-width: 901px) {
  header {
    row-gap: 0.8rem;
  }
  header > nav { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
  }
  header > nav .language-dropdown.desktop-only { 
    position: absolute; 
    right: 24px; 
    top: 50%; 
    transform: translateY(-50%); 
    margin: 0;
  }
}
header.header--shrink {
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  min-height: 144px;
}
@media (max-width: 900px) {
  header {
    padding: 0.3rem var(--gutter-mobile);
  }
}
@media (max-width: 600px) {
  header {
    min-height: 96px;
  }
  header.header--shrink {
    min-height: 96px;
  }
}
@supports not (color-mix(in oklab, white, black)) {
  header {
    background: var(--deep-blue);
  }
}

header h1,
#applications h2,
.welcome-section h2,
.application-detail-intro h2,
.application-detail-section h3,
#contact h2,
footer h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.header-logo-link {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
  display: inline-block;
  will-change: opacity;
}

.header-logo-link:hover {
  opacity: 0.9;
}

header h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0;
  color: var(--main-white);
  letter-spacing: 0.5px;
}
@media (max-width: 700px) {
  header h1 {
    font-size: 1.7rem;
  }
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0 !important;
}

nav a {
  text-decoration: none;
  color: var(--main-white);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
  position: relative;
}
nav a::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6px;
  height: 2px;
  background: var(--accent-turquoise);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
nav a:hover::after {
  transform: scaleX(1);
}
nav a:hover {
  background: transparent;
  color: var(--accent-turquoise);
}


/* Applications Section */
#applications {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 0 2.5rem 0;
  background: linear-gradient(180deg,#EEF1F4 0%, #F5F7F9 100%);
}

#applications .applications-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 900px) {
  #applications {
    padding: 2.5rem 0 2rem 0;
  }
  #applications .applications-inner {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}

#applications h2 {
  font-size: 2rem; /* adjusted from 1.7rem to match .products-header h2 */
  color: var(--main-petrol);
  text-align: center;
  margin-bottom: 2rem;
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 100%;
  margin: 0 auto;
}

/* 3x3 Grid for larger screens when we have 9 applications */
@media (min-width: 900px) {
  .application-grid { 
    grid-template-columns: repeat(3, 1fr); 
    max-width: 900px;
  }
}

/* Responsive breakpoints */
@media (max-width: 899px) and (min-width: 600px) {
  .application-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 599px) {
  .application-grid { 
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }
}

/* Fix: restore rounded corners for application cards */
.application-item { border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--main-white); }
.application-item .application-image { border-radius: 0; }
.application-item .application-title-overlay { border-radius: 0 0 var(--radius-md) var(--radius-md); }
/* End fix */

/* Contact info card */
.contact-info-card { 
  background-color: #f7fafc; 
  border-radius: var(--radius-md); 
  padding: 2.6rem 2.2rem 2.4rem; 
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.08);
  max-width: 880px; 
  margin: 0 auto; 
}
.contact-info-heading { 
  margin:0 0 1.8rem 0; 
  font-size:1.15rem; 
  letter-spacing:.5px; 
  text-transform:uppercase; 
  font-weight:700; 
  color: var(--main-petrol); 
  text-align:left; 
}
.contact-info-grid { 
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); 
  gap:1.8rem 3.2rem; 
  align-items:start; 
}
.contact-info-grid.two-col { grid-template-columns: 1fr 1fr; }
@media (max-width:780px){ .contact-info-grid.two-col { grid-template-columns:1fr; } }
.contact-info-company .address { margin:.65rem 0 0 0; line-height:1.55; }
.contact-info-contact { display:flex; flex-direction:column; gap:1.1rem; }
.contact-info-contact .info-block { margin:0; }
.contact-info-contact .info-label { display:inline-block; margin:0 0 .15rem 0; }
.contact-info-contact .info-value { display:inline-block; }
@media (max-width:650px){
  .contact-info-grid { gap:1.4rem 1.6rem; }
  .contact-info-card { padding:2.2rem 1.4rem 2rem; }
}
.contact-info-cell { font-size:1.02rem; line-height:1.55; }
.contact-info-cell .company-name { margin:0; font-weight:600; color: var(--main-petrol); }
.contact-info-cell .info-label { margin:0 0 .15rem 0; font-weight:600; color: var(--main-petrol); }
.contact-info-cell .info-value { margin:0; font-weight:500; color: var(--main-petrol); }
.contact-info-cell a { color: var(--accent-turquoise); font-weight:500; text-decoration:none; }
.contact-info-cell a:hover { text-decoration:underline; }


.application-item {
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 24%, white 76%);
}
/* Hover-Effekt für .application-item entfernt (Regel gelöscht) */

.application-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.application-image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.application-title-overlay {
  width: 100%;
  background: linear-gradient(180deg, rgba(34,40,49,0) 0%, rgba(34,40,49,0.72) 85%);
  color: #fff;
  font-size: 1.18rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
  letter-spacing: 0.5px;
}

/* Contact Section */
#contact {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 var(--gutter) !important; /* Verwende Gutter-Variable */
  text-align: left !important;
  max-width: var(--layout-max);
  margin: 0 auto;
}

/* Mobile Sicherheitsabstände für Kontakt-Sektion */
@media (max-width: 900px) {
  #contact {
    padding: 0 var(--gutter-mobile) !important;
  }
}

#contact > h2 {
  margin: 2rem 0 1.2rem !important;
  text-align: left !important;
}
#contact .contact-container { margin-top: .5rem; }

main {
  flex: 1;
  /* Remove max-width and auto-centering for shop pages to allow full-width sections */
}

/* Shop pages use full-width sections with inner containers */
.shop-main {
  flex: 1;
  width: 100%;
}

/* Section containers for shop pages */
.shop-category-section {
  margin-bottom: 3.5rem;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

/* Electrode gallery section */
.electrode-gallery-section {
  max-width: var(--layout-max);
  margin: 0 auto 3.5rem;
  padding: 0 1rem;
}

/* Floating Offer Button - fixed at bottom right */
.floating-offer-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--main-orange);
  color: var(--text-on-accent);
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 111, 60, 0.4);
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.4px;
  border: none;
}

.floating-offer-btn:hover {
  background: var(--main-orange-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255, 111, 60, 0.5);
  color: var(--text-on-accent);
}

.floating-offer-btn:active {
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .floating-offer-btn {
    right: 1.5rem;
    bottom: 1.5rem;
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .floating-offer-btn {
    right: 1rem;
    bottom: 1rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
  }
}

/* Welcome Section mit verbesserten mobilen Sicherheitsabständen */
.welcome-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  padding: 3.5rem var(--gutter) 2.5rem var(--gutter);
  background:
    radial-gradient(1200px 500px at 10% -10%, color-mix(in oklab, var(--main-petrol) 16%, transparent), transparent 60%),
    radial-gradient(900px 400px at 110% 10%, color-mix(in oklab, var(--accent-turquoise) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--main-bg), var(--main-white));
  text-align: center;
  border-radius: 0;
  margin-bottom: 2.5rem;
  box-shadow: none;
  z-index: 2;
}
.welcome-section h2 {
  color: var(--main-petrol);
  font-size: 2rem;
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.welcome-section p {
  color: var(--main-grey);
  font-size: 1.15rem;
  max-width: 1100px;
  margin: 0 auto;
  line-height: 1.8;
}
.welcome-section strong {
  color: var(--accent-turquoise);
}
@media (max-width: 900px) {
  .welcome-section {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}

.application-detail-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}
.application-detail-intro h2 {
  font-size: 2rem;
  color: var(--main-petrol);
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.application-detail-intro p {
  color: var(--main-grey);
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}
.application-detail-section {
  margin-bottom: 2.2rem;
}
.application-detail-section h3 {
  font-size: 1.2rem;
  color: var(--main-petrol);
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.application-detail-section ul {
  list-style: disc inside;
  padding-left: 1.2rem;
  color: var(--main-grey);
  font-size: 1.05rem;
}

.application-intro {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  left: 0;
  right: 0;
  transform: none;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .application-intro {
    padding-left: 0;
    padding-right: 0;
  }
}
.main-content {
  max-width: 900px;
  margin: 2.5rem auto 2rem auto;
  padding: 0 1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.application-title {
  font-size: 2rem;
  color: var(--main-petrol);
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.application-welcome-text {
  color: var(--main-grey);
  font-size: 1.15rem;
  margin: 0 auto;
  line-height: 1.8;
  max-width: 600px;
}
.application-welcome-text strong {
  color: var(--accent-turquoise);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 0 !important;
  position: relative;
}
.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 1.5rem;
}
.logo-container svg, .logo-fixed svg, .logo-fixed img {
  height: 120px;
  width: 120px;
  min-width: 120px;
  min-height: 120px;
  max-width: 120px;
  max-height: 120px;
  display: block;
}
.logo-fixed {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  height: 120px;
  width: 120px;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 600px) {
  .logo-container svg, .logo-fixed svg, .logo-fixed img {
    height: 88px;
    width: 88px;
    min-width: 88px;
    min-height: 88px;
    max-width: 88px;
    max-height: 88px;
  }
  .logo-fixed {
    top: 8px;
    left: 8px;
    height: 88px;
    width: 88px;
  }
  .header-row { 
    padding-left: 96px; 
  }
}
.language-dropdown {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
/* ---------------------------------------------
   Modernisiertes Sprach-Dropdown
   - Einheitliches Styling für Desktop & Mobile
   - Hohe Kontrast- und Fokus-Sichtbarkeit
   - Saubere, native Performance (kein JS nötig)
   - Barrierefrei (Focus, Forced Colors, Reduced Motion)
---------------------------------------------- */

/* Gemeinsame Basis */
#language-select,
#language-select-mobile {
  --_radius: 0.85rem;
  --_border-color: color-mix(in oklab, var(--main-petrol) 28%, white 72%);
  --_border-color-hover: color-mix(in oklab, var(--accent-turquoise) 42%, white 58%);
  --_bg: #fff;
  --_bg-hover: color-mix(in oklab, #fff 92%, var(--accent-turquoise) 8%);
  --_text: var(--main-grey);
  --_shadow: 0 2px 6px -1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.08);
  --_shadow-focus: 0 0 0 2px color-mix(in oklab, var(--accent-turquoise) 55%, #ffffff 45%), 0 0 0 4px color-mix(in oklab, var(--accent-turquoise) 25%, transparent 75%);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.1;
  padding: 0.38rem 2rem 0.38rem 0.9rem;
  border-radius: var(--_radius);
  border: 1px solid var(--_border-color);
  background: var(--_bg);
  color: var(--_text);
  box-shadow: var(--_shadow);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 78px;
  height: 2.15rem;
  position: relative;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .35s cubic-bezier(.68,-0.55,.27,1.55), transform .35s cubic-bezier(.68,-0.55,.27,1.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2317687E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1.05rem;
}

#language-select:hover,
#language-select-mobile:hover {
  background: var(--_bg-hover);
  border-color: var(--_border-color-hover);
}

#language-select:active,
#language-select-mobile:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Tastatur Fokus */
#language-select:focus-visible,
#language-select-mobile:focus-visible {
  outline: none;
  border-color: var(--accent-turquoise);
  box-shadow: var(--_shadow-focus);
}

/* High Contrast / Forced Colors Unterstützung */
@media (forced-colors: active) {
  #language-select,
  #language-select-mobile {
    forced-color-adjust: auto;
    background: Canvas;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  #language-select:focus-visible,
  #language-select-mobile:focus-visible {
    border-color: Highlight;
    box-shadow: 0 0 0 2px Highlight;
  }
}

/* Dark Mode (optional, sanfte Anpassung) */
@media (prefers-color-scheme: dark) {
  #language-select,
  #language-select-mobile {
    --_bg: color-mix(in oklab, #0F2534 88%, #173E4F 12%);
    --_bg-hover: color-mix(in oklab, #163242 82%, var(--accent-turquoise) 18%);
    --_border-color: color-mix(in oklab, var(--accent-turquoise) 35%, #0F2534 65%);
    --_border-color-hover: color-mix(in oklab, var(--accent-turquoise) 55%, #0F2534 45%);
    --_text: #E6F2F4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23A8E4EF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    box-shadow: 0 2px 6px -1px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.55);
  }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  #language-select,
  #language-select-mobile {
    transition: none;
  }
}

/* Mobile Breite optimiert */
@media (max-width: 640px) {
  #language-select-mobile {
    min-width: 100px;
    font-size: 1rem;
    padding-right: 2.2rem;
  }
}

/* Platz im Header optimieren damit Dropdown nicht an Kanten klebt */
.language-dropdown {
  padding-left: .5rem;
}
.language-mobile select {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* Burger-Menü Button */
.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 50px;
  height: 50px;
  background: var(--accent-turquoise);
  border: 1px solid color-mix(in oklab, var(--accent-turquoise) 70%, #002b33 30%);
  cursor: pointer;
  z-index: 2001;
  position: fixed;
  top: 18px;
  right: 18px;
  transition: background .28s ease, border-color .28s ease, box-shadow .3s ease, transform .35s cubic-bezier(.68,-0.55,.27,1.55);
  border-radius: 16px;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.45), 0 3px 8px -2px rgba(0,0,0,0.35);
}
.burger-menu:active {
  transform: scale(0.9) rotate(-6deg);
}
.burger-menu span {
  display: block;
  height: 3px;
  width: 28px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  border-radius: 3px;
  transition: transform .45s cubic-bezier(.68,-0.55,.27,1.55), opacity .25s ease, background .25s ease;
}
.burger-menu:hover { 
  background: color-mix(in oklab, var(--accent-turquoise) 85%, #003640 15%);
  border-color: color-mix(in oklab, var(--accent-turquoise) 65%, #001f24 35%);
  box-shadow: 0 8px 22px -5px rgba(0,0,0,0.55), 0 4px 10px -3px rgba(0,0,0,0.4);
}
.burger-menu:hover span { background: #fff; }

.burger-menu.open { 
  background: color-mix(in oklab, var(--accent-turquoise) 80%, #003640 20%);
  border-color: color-mix(in oklab, var(--accent-turquoise) 60%, #001f24 40%);
  box-shadow: 0 10px 26px -6px rgba(0,0,0,0.55), 0 4px 14px -4px rgba(0,0,0,0.45);
}
.burger-menu.open span { background: var(--accent-turquoise); }
.burger-menu.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger-menu.open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.burger-menu.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.burger-menu:focus-visible { outline:none; box-shadow: 0 0 0 3px rgba(0,123,143,0.55), 0 0 0 6px rgba(255,255,255,0.55); }

/* Light-on-light fallback: Wenn Body einen sehr hellen Hintergrund hat, verstärke Umrandung */
@media (max-width: 900px) {
  body:not(.dark) .burger-menu { border-color: rgba(255,255,255,0.4); }
}

/* Zustand wenn Menü geöffnet: etwas helleren Hintergrund für visuelles Feedback */
/* entfernt: Open-State Hintergrund bereits neu definiert oben */

/* Overlay für das mobile Menü */
#menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.25);
  z-index: 999;
}
#menu-overlay.active {
  display: block;
}

/* Navigation */
#main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.desktop-only { display: block; }
.mobile-only { display: none !important; }

@media (max-width: 900px) {
  .header-row {
    flex-wrap: wrap;
  }
  .burger-menu {
    display: flex;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }
  #main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80vw;
    max-width: 320px;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.08);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    will-change: transform;
    overflow-y: auto; /* Ermöglicht Scrollen bei kleinen Viewports */
    -webkit-overflow-scrolling: touch; /* Smooth momentum scroll iOS */
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 2rem);
  }
  #main-nav.open {
    transform: translateX(0);
  }
  #main-nav.active {
    transform: translateX(0);
  }
  #main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0 1.5rem;
    flex: 1 0 auto;
  }
  #main-nav ul li {
    margin: 1.2rem 0;
  }
  #main-nav ul li a {
    color: var(--main-grey);
    background: none;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 0.7rem 0.5rem;
    border-radius: 0.7rem;
    transition: background 0.2s, color 0.2s;
    display: block;
  }
  #main-nav ul li a:hover {
    background: color-mix(in oklab, var(--accent-turquoise) 18%, white 82%);
    color: var(--main-petrol);
  }
  .floating-offer-btn {
    right: 1.5rem;
    bottom: 1.5rem;
  }

  /* Wenn das Menü offen ist und höher als der Viewport wird, verhindern wir Body-Scroll-Jump */
  body.menu-open {
    overflow: hidden;
    touch-action: none; /* Verhindert ungewolltes Hintergrundscrollen auf mobilen Browsern */
  }
}

/* Sprachwahl im mobilen Menü */
.language-mobile select {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* --- Webshop Hero --- */
.shop-hero {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1.5rem 2.5rem 1.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
  box-shadow: none;
  border-radius: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-hero .shop-hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(35,39,47,0.38);
  z-index: 1;
  border-radius: 0;
}
.shop-hero .shop-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: var(--layout-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
}
.shop-hero h1, .shop-hero p {
  color: #fff;
}
.shop-hero h1 {
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0 0 1.2rem 0;
  color: var(--main-white);
  letter-spacing: 0.5px;
}
@media (max-width: 700px) {
  .shop-hero h1 {
    font-size: 1.2rem;
  }
}
/* Hintergrundbilder für alle Shop-Seiten */
.shop-hero-kakao {
  background: url('images/Anwendungsgebiete/Hero Images/Kakao_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-kaffee {
  background: url('images/Anwendungsgebiete/Hero Images/Kaffee_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-holz {
  background: url('images/Anwendungsgebiete/Hero Images/Holz_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-baumwolle {
  background: url('images/Anwendungsgebiete/Hero Images/Baumwolle_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-leder {
  background: url('images/Anwendungsgebiete/Hero Images/Leder_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-tabak {
  background: url('images/Anwendungsgebiete/Hero Images/Tabak_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-tee {
  background: url('images/Anwendungsgebiete/Hero Images/Tee_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-textilien {
  background: url('images/Anwendungsgebiete/Hero Images/Textilien_1400x500px.png') center center/cover no-repeat;
}
.shop-hero-baustoffe {
  background: url('images/Anwendungsgebiete/Hero Images/Baustoffe_1400x500px.png') center center/cover no-repeat;
}

/* Modern WebP support with fallback for all hero images */
@supports (background-image: url('image.webp')) {
  .shop-hero-kakao {
    background-image: url('images/Anwendungsgebiete/Hero Images/Kakao_1400x500px.webp');
  }
  .shop-hero-kaffee {
    background-image: url('images/Anwendungsgebiete/Hero Images/Kaffee_1400x500px.webp');
  }
  .shop-hero-holz {
    background-image: url('images/Anwendungsgebiete/Hero Images/Holz_1400x500px.webp');
  }
  .shop-hero-baumwolle {
    background-image: url('images/Anwendungsgebiete/Hero Images/Baumwolle_1400x500px.webp');
  }
  .shop-hero-leder {
    background-image: url('images/Anwendungsgebiete/Hero Images/Leder_1400x500px.webp');
  }
  .shop-hero-tabak {
    background-image: url('images/Anwendungsgebiete/Hero Images/Tabak_1400x500px.webp');
  }
  .shop-hero-tee {
    background-image: url('images/Anwendungsgebiete/Hero Images/Tee_1400x500px.webp');
  }
  .shop-hero-textilien {
    background-image: url('images/Anwendungsgebiete/Hero Images/Textilien_1400x500px.webp');
  }
  .shop-hero-baustoffe {
    background-image: url('images/Anwendungsgebiete/Hero Images/Baustoffe_1400x500px.webp');
  }
}

@media (max-width: 700px) {
  .shop-hero {
    padding: 2rem 0.5rem 1.5rem 0.5rem;
    border-radius: 0;
    min-height: 120px;
    background-position: center 30%;
  }
}

/* --- Kategorien-Navigation --- */
.shop-categories-nav {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  background: none;
  box-shadow: none;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}
.shop-category-link {
  font-size: 1.15rem;
  color: var(--main-white);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  background: var(--main-petrol);
  transition: background 0.2s, color 0.2s;
}
.shop-category-link.active,
.shop-category-link:hover {
  background: var(--accent-turquoise);
  color: var(--main-white);
}

/* Mobile Optimierungen für Kategorien-Navigation */
@media (max-width: 600px) {
  .shop-categories-nav {
    gap: 1rem;
    padding: 0 0.5rem;
  }
  .shop-category-link {
    font-size: 0.95rem;
    padding: 0.4rem 0.9rem;
  }
}
@media (max-width: 400px) {
  .shop-categories-nav {
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .shop-category-link {
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
  }
}

/* --- Kategorie-Titel --- */
.shop-category-title {
  font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2.2rem); /* match Zubehör heading size */
  color: var(--main-petrol);
  text-align: center; /* centered per request */
  margin: 0 0 1.2rem 0;
  font-weight: 700;
  padding-left: 0.5rem;
  background: none;
  line-height: 1.2;
  margin-top: 3.5rem;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* --- Produkt-Grid: Produkte untereinander, volle Breite --- */
.shop-product-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: var(--layout-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 600px) {
  .shop-product-grid {
    padding: 0 0.75rem;
    gap: 2rem;
  }
}

@media (max-width: 400px) {
  .shop-product-grid {
    padding: 0 0.5rem;
    gap: 1.5rem;
  }
}

/* --- Produkt-Kachel: volle Breite --- */
.shop-product-card {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: stretch;
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 24%, white 76%);
  padding: 1.5rem 1.2rem;
  gap: 1.2rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Hover-Effekt für .shop-product-card entfernt (Regel gelöscht) */
.shop-product-image {
  flex: 0 0 180px;
  width: 180px;
  height: 260px;
  min-height: 180px;
  max-height: 100%;
  background: none;
  border-radius: 0;
  box-shadow: none;
  margin-right: 1.5rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}
.shop-product-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
  display: block;
  box-shadow: var(--shadow-sm);
  padding: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 12%, white 88%);
}
@media (max-width: 700px) {
  .shop-product-card {
    max-width: 100%;
    border-radius: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .shop-product-card {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-product-image {
    flex: none;
    width: 100%;
    height: 180px;
    min-height: 120px;
    margin-right: 0;
    margin-bottom: 1rem;
    justify-content: flex-start;
  }
  .shop-product-image img {
    max-width: 100%;
    min-height: 120px;
    border-radius: 0.7rem;
  }
}
.product-icon {
  font-size: 2rem;
}
.shop-product-details {
  flex: 1 1 auto;
}
.shop-product-name {
  font-size: 1.2rem;
  color: var(--main-petrol);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}
.shop-product-specs {
  list-style: disc inside;
  color: var(--main-grey);
  font-size: 1rem;
  margin: 0 0 1rem 0;
  padding-left: 1rem;
  line-height: 1.6;
}
.shop-btn {
  background: var(--main-orange);
  color: var(--text-on-accent);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shop-btn:hover {
  background: var(--main-orange-dark);
  color: #fff;
}
.shop-btn:active {
  transform: translateY(1px) scale(0.995);
}

/* Halbtransparente Box für Hero-Text */
.shop-hero-content-box {
  background: rgba(35, 39, 47, 0.62);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.5rem;
  display: inline-block;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(26, 35, 126, 0.10);
  color: #fff;
  backdrop-filter: saturate(1.2) blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 700px) {
  .shop-hero-content-box {
    padding: 0.7rem 0.5rem;
    max-width: 98vw;
  }
}

/* --- Kachel mit Bild oben: Responsive 16:9 Darstellung --- */
.shop-product-card-horizontal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 24%, white 76%);
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Hover-Effekt für .shop-product-card-horizontal entfernt (Regel gelöscht) */
.shop-product-image-horizontal {
  width: 100%;
  aspect-ratio: 1200 / 425;
  background: #f7fafd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.shop-product-image-horizontal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.shop-product-details-horizontal {
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
}
@media (max-width: 700px) {
  .shop-product-card-horizontal {
    max-width: 100%;
    border-radius: 0;
  }
  .shop-product-details-horizontal {
    padding: 1rem 0.5rem 1rem 0.5rem;
  }
}

/* Aqua-Boy Info Abschnitt */
.aqua-boy-section {
  background: var(--main-white);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 2.5rem auto 2.5rem auto;
  padding: 2.5rem var(--gutter) 2.5rem var(--gutter);
  max-width: var(--layout-max);
  font-size: 1.08rem;
}
.aqua-boy-section h2 {
  color: var(--main-petrol);
  margin-bottom: 1.2rem;
  font-size: 2rem;
}
.aqua-boy-section h3 {
  color: var(--main-petrol);
  margin-top: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 1.2rem;
}
.aqua-boy-section ul {
  margin-left: 1.2rem;
  margin-bottom: 1.2rem;
}
.aqua-boy-section ul li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.aqua-boy-section strong {
  color: var(--accent-turquoise);
}
@media (max-width: 700px) {
  .aqua-boy-section {
    padding: 1.2rem 1rem 1.2rem 1rem;
    font-size: 0.98rem;
  }
  .aqua-boy-section h2 {
    font-size: 1.3rem;
  }
}

/* Entferntes altes Grid (.aqua-boy-grid /.aqua-boy-text) – jetzt einfache Zentrierung */
.aqua-boy-figure { margin: 2rem auto 0; padding: 0; max-width: var(--layout-max); }
.aqua-boy-figure .aqua-boy-setup-image { /* resized only this specific image */ max-width: 560px; width: 100%; height: auto; margin: 0 auto; display: block; }
@media (max-width: 600px) { .aqua-boy-figure { margin-top: 1.6rem; max-width: 100%; } }

/* Aqua-Piccolo Info Abschnitt */
.aqua-piccolo-section {
  background: var(--main-white);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 2.5rem auto 2.5rem auto;
  padding: 2.5rem var(--gutter) 2.5rem var(--gutter);
  max-width: var(--layout-max);
  font-size: 1.08rem;
}
.aqua-piccolo-section h2 {
  color: var(--main-petrol);
  margin-bottom: 1.2rem;
  font-size: 2rem;
}
.aqua-piccolo-section h3 {
  color: var(--main-petrol);
  margin-top: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 1.2rem;
}
.aqua-piccolo-section ul {
  margin-left: 1.2rem;
  margin-bottom: 1.2rem;
}
.aqua-piccolo-section ul li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.aqua-piccolo-section strong {
  color: var(--accent-turquoise);
}
@media (max-width: 700px) {
  .aqua-piccolo-section {
    padding: 1.2rem 1rem 1.2rem 1rem;
    font-size: 0.98rem;
  }
  .aqua-piccolo-section h2 {
    font-size: 1.3rem;
  }
}

.aqua-piccolo-figure { 
  margin: 2rem auto 0; 
  padding: 0; 
  max-width: var(--layout-max); 
}
.aqua-piccolo-figure .aqua-piccolo-setup-image { 
  max-width: 560px; 
  width: 100%; 
  height: auto; 
  margin: 0 auto; 
  display: block; 
}
@media (max-width: 600px) { 
  .aqua-piccolo-figure { 
    margin-top: 1.6rem; 
    max-width: 100%; 
  } 
}

.shop-category-section {
  margin-bottom: 3.5rem;
}

/* Electrode Card Grid */
.electrode-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  justify-content: flex-start;
  margin-top: 1.5rem;
}
.electrode-card {
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.2rem;
  max-width: 340px;
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Links ausgerichtet wie Meter-Karten */
  text-align: left; /* Text linksbündig */
  justify-content: flex-start; /* Inhalt oben beginnen lassen */
  min-height: 90px; /* Etwas höher für bessere Proportionen */
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 24%, white 76%);
}
/* Hover-Effekt für .electrode-card entfernt (Regel gelöscht) */
.electrode-card-image {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  background: transparent; /* Changed from gradient to transparent */
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 15%, white 85%);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem;
}
.electrode-card-image img {
  max-width: 160px;
  max-height: 160px;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(10, 35, 66, 0.08);
  background: transparent;
  padding: 0.5rem;
}
.electrode-card .electrode-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Links ausgerichtet */
  text-align: left; /* Text linksbündig */
  width: 100%;
  gap: .2rem;
}
.electrode-card .electrode-name {
  margin-bottom: .15rem;
}
.electrode-card .electrode-description {
  text-align: left; /* Links ausgerichtet */
  line-height: 1.3;
}
.electrode-card-details h3 {
  color: var(--main-petrol);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.electrode-card-details p {
  font-size: 0.98rem;
  margin-bottom: 0.7rem;
  text-align: center;
}
.electrode-card-details ul {
  margin-bottom: 0.7rem;
  font-size: 0.97rem;
  padding-left: 1.1rem;
}
@media (max-width: 700px) {
  .electrode-card-grid {
    flex-direction: column;
    gap: 1.2rem;
  }
  .electrode-card {
    max-width: 98vw;
    padding: 1rem 0.5rem;
  }
  .electrode-card-image {
    width: 120px;
    height: 120px;
  }
  .electrode-card-image img {
    max-width: 110px;
    max-height: 110px;
  }
}

/* === Additional override: remove Rahmen/Schatten auch bei Elektrodenkacheln (.electrode-card-image) === */
.electrode-card-image {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.electrode-card-image img {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
/* (Falls noch alte gecachte Styles greifen: Browser Cache leeren oder Hard-Reload durchführen) */

/* Electrode Gallery */
.electrode-gallery {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: var(--layout-max);
  margin: 0 auto;
}

/* Optimierte Bilddarstellung für Elektrodenkarten */
.electrode-gallery-card {
  display: flex;
  flex-direction: row;
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 2.2rem 1.5rem;
  align-items: center;
  gap: 2.5rem;
  max-width: 100%;
  min-height: 320px;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 24%, white 76%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Hover-Effekt für .electrode-gallery-card entfernt (Regel gelöscht) */
.electrode-gallery-image,
.electrode-image-large {
  flex: 0 0 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* Changed from gradient to transparent */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  max-width: 340px;
  min-width: 220px;
  min-height: 220px;
  height: 220px;
  position: relative;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 15%, white 85%);
}
.electrode-gallery-image img,
.electrode-image-large img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 200px;
  min-height: 160px;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(10, 35, 66, 0.08);
  background: transparent;
  padding: 0.5rem;
}
@media (max-width: 1200px) {
  .electrode-gallery-card {
    gap: 1.2rem;
    padding: 1.2rem 0.5rem;
    min-height: 220px;
  }
  .electrode-gallery-image,
  .electrode-image-large {
    max-width: 260px;
    min-width: 160px;
    height: 70%;
    min-height: 120px;
    padding: 0.5rem;
  }
  .electrode-gallery-image img,
  .electrode-image-large img {
    max-width: 220px;
    max-height: 180px;
    min-height: 100px;
  }
}
@media (max-width: 900px) {
  .electrode-gallery-card {
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.2rem 0.5rem;
    min-height: 0;
  }
  .electrode-gallery-image,
  .electrode-image-large {
    max-width: 98vw;
    min-width: 120px;
    width: 100%;
    height: 220px;
    min-height: 120px;
    padding: 0.5rem;
  }
  .electrode-gallery-image img,
  .electrode-image-large img {
    max-width: 90vw;
    max-height: 220px;
    min-height: 100px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}
@media (max-width: 700px) {
  .electrode-gallery {
    gap: 1.2rem;
  }
  .electrode-gallery-card {
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 0.3rem;
    min-height: 0;
  }
  .electrode-gallery-image,
  .electrode-image-large {
    max-width: 98vw;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .electrode-gallery-image img,
  .electrode-image-large img {
    max-width: 90vw;
    max-height: 260px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .electrode-gallery-details {
    width: 100%;
    min-width: 0;
    padding: 0 0.2rem;
    text-align: left;
  }
}

/* === Override: Remove frame/shadow around inner electrode images === */
.electrode-gallery-image,
.electrode-image-large {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important; /* entfernt Innenabstand damit kein künstlicher Rahmen entsteht */
}
.electrode-gallery-image img,
.electrode-image-large img,
.zoomable-electrode {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
/* (Optional) Falls fixe Höhe ohne Padding zu knapp wirkt, kann min-height belassen werden – Layout bleibt stabil durch vorhandene min-height der Container. */

/* === Final override: make inner electrode image container fully transparent (no frame/shadow) --- */
.electrode-gallery-card .electrode-gallery-image,
.electrode-gallery-card .electrode-image-large {
  /* Restore uniform sizing so all cards align consistently */
  flex: 0 0 340px !important;
  max-width: 340px !important;
  min-width: 220px !important;
  min-height: 220px !important;
  height: 220px !important;
  /* Visual reset (transparent, no frame) */
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.electrode-gallery-card .electrode-gallery-image img.zoomable-electrode,
.electrode-gallery-card .electrode-image-large img.zoomable-electrode {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* Responsive adjustments keep working because earlier media queries still target the base selectors (.electrode-gallery-image / .electrode-image-large) */

/* === Final override: remove frame/shadow for zoomable electrode images inside product cards === */
.shop-product-image img.zoomable-electrode,
.electrode-gallery-image img.zoomable-electrode,
.electrode-image-large img.zoomable-electrode,
.shop-product-image img.zoomable-electrode:hover,
.zoomable-electrode {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Electrode Zoom Modal */
/* Optimized & consolidated version */
.electrode-zoom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(35,39,47,0.92);
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  opacity: 0;
  overflow: hidden; /* prevent body scroll jump & hide overflow during animation */
  overscroll-behavior: contain; /* prevent scroll chaining on touch devices */
  padding: 2rem 1.2rem; /* slight inner padding for very small screens */
}
.electrode-zoom-modal:not(.active) { pointer-events: none; }
.electrode-zoom-modal.active {
  display: flex;
  opacity: 1;
  animation: zoomFadeIn 0.35s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes zoomFadeIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
.electrode-zoom-img {
  max-width: 700px;
  width: 90vw;
  max-height: 80vh;
  border-radius: 1.5rem;
  box-shadow: 0 12px 48px rgba(23,98,126,0.22), 0 2px 24px rgba(0,0,0,0.18);
  background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
  padding: 2rem;
  object-fit: contain;
  transition: box-shadow 0.2s, transform 0.2s;
  border: 2px solid var(--main-petrol);
  animation: zoomImageIn 0.4s cubic-bezier(.68,-0.55,.27,1.55);
  max-height: calc(100vh - 6rem); /* adaptive vertical fit */
  width: min(90vw, 820px);
  will-change: transform, box-shadow; /* performance hint */
  contain: paint; /* isolate paint for smoother animations */
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes zoomImageIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
.electrode-zoom-close {
  position: absolute;
  top: 38px;
  right: 54px;
  font-size: 3.2rem;
  color: #fff;
  cursor: pointer;
  z-index: 10001;
  font-weight: bold;
  transition: color 0.2s, transform 0.2s;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.electrode-zoom-close:hover {
  color: var(--accent-turquoise);
  transform: scale(1.15);
}
.electrode-zoom-close:focus-visible { outline: none; color: var(--accent-turquoise); text-shadow: 0 0 0 transparent; box-shadow: 0 0 0 3px rgba(0,123,143,.4); border-radius: 8px; }
.electrode-zoom-modal .electrode-zoom-img {
  box-shadow: 0 16px 64px rgba(23,98,126,0.28), 0 2px 24px rgba(0,0,0,0.22);
}
.electrode-zoom-modal::-webkit-scrollbar {
  display: none;
}
@media (max-width: 900px) {
  .electrode-zoom-img {
    max-width: 98vw;
    max-height: 70vh;
    padding: 1rem;
  }
  .electrode-zoom-close {
    top: 18px;
    right: 18px;
    font-size: 2.2rem;
  }
}

/* Subtle interactive affordance for zoomable thumbnails (if class applied directly to img) */
.zoomable-electrode { transition: transform .28s cubic-bezier(.4,0,.2,1); }
.zoomable-electrode:hover, .zoomable-electrode:focus-visible { transform: scale(1.02); }

/* Reduced motion preference: disable entrance animations */
@media (prefers-reduced-motion: reduce) {
  .electrode-zoom-modal.active { animation: none !important; }
  .electrode-zoom-img { animation: none !important; }
  .zoomable-electrode { transition: none; }
}

/* High contrast mode tweak */
@media (forced-colors: active) {
  .electrode-zoom-modal { background: rgba(0,0,0,0.85); }
  .electrode-zoom-img { border: 2px solid CanvasText; box-shadow: none; }
  .electrode-zoom-close { color: ButtonText; }
  .electrode-zoom-close:focus-visible { box-shadow: 0 0 0 2px Highlight; }

}

/* Product badges */
.product-badges { display: flex; gap: .4rem; margin: .2rem 0 .6rem; flex-wrap: wrap; }
.product-badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: color-mix(in oklab, var(--accent-turquoise) 85%, white 15%); color: var(--text-on-accent); font-weight: 700; font-size: .8rem; letter-spacing: .3px; box-shadow: 0 1px 4px rgba(26,35,126,.12); }

/* Zoom icon overlay on electrode images */
.electrode-zoom-icon { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.92); color: var(--main-petrol); border-radius: 999px; padding: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.14); display: none; cursor: pointer; }
.electrode-zoom-icon svg { width: 22px; height: 22px; display: block; }
.electrode-gallery-image:hover .electrode-zoom-icon,
.electrode-image-large:hover .electrode-zoom-icon { display: inline-flex; }
/* Show zoom icon when focusing the image via keyboard */
.electrode-gallery-image:focus-within .electrode-zoom-icon,
.electrode-image-large:focus-within .electrode-zoom-icon { display: inline-flex; }

/* FAQ section */
.faq-section { 
  max-width: var(--layout-max); 
  margin: 2.5rem auto; 
  padding: 1.5rem; 
  background: var(--main-white); 
  border-radius: var(--radius-md); 
  box-shadow: var(--shadow-sm); 
  border: 1px solid color-mix(in oklab, var(--main-petrol) 22%, white 78%); 
}
.faq-section h2 { margin-top: 0; color: var(--main-petrol); font-size: 1.6rem; }
.faq-section details { border: 1px solid color-mix(in oklab, var(--main-petrol) 16%, white 84%); border-radius: .8rem; padding: .8rem 1rem; margin-bottom: .7rem; background: #fff; }
.faq-section summary { cursor: pointer; font-weight: 700; color: var(--main-petrol); outline: none; }
.faq-section details[open] { box-shadow: var(--shadow-sm); }
.faq-section p { margin: .6rem 0 0 .2rem; color: var(--main-grey); }

/* Mobile optimization for FAQ */
@media (max-width: 900px) {
  .faq-section {
    margin: 2.5rem 1rem;
    padding: 1rem;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Modern buttons - Improved contrast (FINAL VERSION) */
.btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: .5rem; 
    padding: .8rem 1.4rem; 
    border-radius: 999px; 
    font-weight: 700; 
    letter-spacing: .3px; 
    cursor: pointer; 
    border: 2px solid transparent; 
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; 
    text-transform: none; 
    text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
}
/* Service page contact CTA specific shadow hover */
.service-contact-btn:hover, .service-contact-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,123,143,0.35), 0 4px 14px rgba(0,123,143,0.45);
}

.btn:active { 
    transform: translateY(1px) scale(.995); 
}

.btn-primary { 
    background: var(--main-orange); 
    color: var(--text-on-accent); 
    border-color: var(--main-orange);
    box-shadow: var(--shadow-sm); 
}

.btn-primary:hover { 
    background: var(--main-orange-dark); 
    border-color: var(--main-orange-dark);
    color: #fff; 
    box-shadow: var(--shadow-md); 
}

.btn-secondary { 
    background: var(--main-white); 
    color: var(--main-petrol); 
    border: 2px solid var(--main-petrol);
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}

.btn-secondary:hover { 
    background: var(--main-petrol); 
    border-color: var(--main-petrol); 
    color: var(--main-white); 
    box-shadow: var(--shadow-md);
}

.btn-secondary:disabled {
    background: #f0f0f0;
    color: #888;
    border: 2px solid #ccc;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

/* Wizard dynamic highlight state when selection present */
.wizard-next.wizard-next-active {
  background: var(--main-orange);
  color: var(--text-on-accent);
  border: 2px solid var(--main-orange);
}
.wizard-next.wizard-next-active:hover {
  background: var(--main-orange-dark);
  border-color: var(--main-orange-dark);
  color: #fff;
}

.btn-accent { 
    background: var(--accent-turquoise); 
    color: var(--text-on-accent); 
    border-color: var(--accent-turquoise);
    box-shadow: var(--shadow-sm); 
}

.btn-accent:hover { 
    background: color-mix(in oklab, var(--accent-turquoise) 85%, black 15%); 
    border-color: color-mix(in oklab, var(--accent-turquoise) 85%, black 15%);
    color: #fff; 
    box-shadow: var(--shadow-md); 
}

/* Hero (welcome) modernized */
.hero { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 4rem 1.5rem 3rem; overflow: hidden; }
/* Service page hero override: remove card look, flush under header */
.service-hero { background:#fff; border-radius:0; box-shadow:none; margin-top:0; padding:2.3rem 1.25rem 1.9rem; }
@media (max-width:1100px){ .service-hero { padding:2.1rem 1.05rem 1.7rem; } }
@media (max-width:900px){ .service-hero { padding:1.9rem .95rem 1.55rem; } }
@media (max-width:600px){ .service-hero { padding:1.7rem .85rem 1.35rem; } }
/* Tighten internal hero spacing */
.service-hero h2 { margin:0 0 .65rem; line-height:1.16; }
.service-hero p.lead { margin:.3rem 0 .8rem; }
.service-hero .actions { margin:.2rem 0 0; gap:.45rem; }
.service-hero .actions .btn { padding:.55rem 1.05rem; }
.hero .container { max-width: var(--layout-max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
.hero h1 { color: var(--main-petrol); margin: 0 0 1rem; letter-spacing: .4px; }
.hero p.lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); color: var(--main-grey); margin: 0 0 1.4rem; }
.hero .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  margin: 1.2rem 0 0 0;
}
.hero .bullets { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; margin-top: 1rem; color: var(--main-grey); }
.hero .bullet { display: flex; align-items: center; gap: .5rem; }
.hero .bullet::before { content: '✓'; color: var(--accent-turquoise); font-weight: 900; }
@media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; gap: 1.6rem; } }

/* Tighter spacing brand lockup -> lead text */
.hero .brand-lockup { line-height: 0; margin-bottom: .55rem; }
.hero .brand-logo-lockup { display: block; margin: 0; line-height: 0; margin-bottom: -30px; }
.hero p.lead { margin-top: 0; }

/* Features grid */
.features { 
  margin: 0 0 2.5rem; 
  padding: 8px var(--gutter) 0 var(--gutter); /* Oben 8px Padding für Hover-Effekt */
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 1.4rem; 
  max-width: var(--layout-max); 
  margin-left: auto; 
  margin-right: auto; 
}
@media (max-width: 900px) { 
  .features { 
    grid-template-columns: 1fr; 
    padding: 8px var(--gutter-mobile) 0 var(--gutter-mobile); 
  } 
}

/* Feature cards styling */
.feature-card {
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.2rem;
  text-align: center;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
@media (max-width: 600px) {
  .feature-card { padding: 1.3rem 1rem; }
}
@media (max-width: 400px) {
  .feature-card { padding: 1.1rem 0.85rem; }
}

/* Clickable feature cards */
.feature-card-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.feature-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-turquoise);
}

.feature-card-link:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.feature-card-link:active {
  transform: translateY(-2px);
}

/* Hover-Effekt für .feature-card entfernt (Regel gelöscht) */

.feature-card h3 {
  color: var(--main-petrol);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.8rem 0;
  letter-spacing: 0.3px;
}

.feature-card p {
  color: var(--main-grey);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Ensure text colors are preserved in clickable cards */
.feature-card-link h3 {
  color: var(--main-petrol);
}

.feature-card-link p {
  color: var(--main-grey);
}

.feature-card-link:hover h3 {
  color: var(--main-petrol);
}

.feature-card-link:hover p {
  color: var(--main-grey);
}

/* CTA band */
.cta-band { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: linear-gradient(90deg, var(--main-petrol), color-mix(in oklab, var(--main-petrol) 82%, black 18%)); color: var(--main-white); padding: 2rem 0; margin-top: 3rem; }
.cta-band .container { max-width: var(--layout-max); margin: 0 auto; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 1.5rem; }
@media (max-width: 600px) {
  .cta-band .container { padding: 0 1.25rem; }
}
@media (max-width: 400px) {
  .cta-band .container { padding: 0 1rem; }
}
.cta-band h3 { margin: 0; font-weight: 700; letter-spacing: .3px; }
/* Override secondary button hover inside dark CTA so it doesn't blend with band */
.cta-band .btn.btn-secondary { background: var(--main-white); color: var(--main-petrol); border-color: var(--main-white); }
.cta-band .btn.btn-secondary:hover { background: var(--accent-turquoise); border-color: var(--accent-turquoise); color: var(--main-white); }
/* Service CTA Kontakt-Button: CI Hover-Farbe erzwingen */
.cta-band .service-contact-btn:hover,
.cta-band .service-contact-btn:focus-visible {
  background: #007B8F !important;
  border-color: #007B8F !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* Breitere Variante für Service Kontakt CTA */
.cta-band .service-contact-btn {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  min-width: unset; /* bewusst keine fixe Mindestbreite, nur etwas mehr Padding */
}

/* Service Prozess Steps */
.process-steps-grid { display:grid; gap:1.4rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-top:1rem; }
@media (max-width: 600px) {
  .process-steps-grid { gap: 1rem; grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .process-steps-grid { gap: 0.75rem; }
}
/* Breitere Prozess-Karten analog zur visuellen Präsenz der Feature-Cards */
.process-step { background: var(--main-white); border:1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%); border-radius: var(--radius-md); padding:1.4rem 1.25rem 1.5rem; box-shadow: var(--shadow-sm); position:relative; display:flex; flex-direction:column; gap:.55rem; }
@media (max-width: 600px) {
  .process-step { padding: 1.2rem 1rem 1.3rem; }
}
@media (max-width: 400px) {
  .process-step { padding: 1rem 0.85rem 1.1rem; }
}
/* Heading & Text-Größen an Feature-Cards angleichen */
.process-step h3 { margin:0; font-size:1.1rem; font-weight:700; color:var(--main-petrol); letter-spacing:.3px; }
.process-step p { margin:0; font-size:0.95rem; line-height:1.5; color:var(--main-grey); }
.process-flow-section { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding:3.2rem 1.5rem 2.4rem; }
.process-flow-section .inner { max-width:var(--layout-max); margin:0 auto; padding:0; }
@media (max-width:900px){ .process-flow-section { padding:2.6rem 1rem 2.2rem; } }
.process-step .step-number { width:34px; height:34px; border-radius:50%; background:var(--main-petrol); color:var(--main-white); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:0.9rem; margin-bottom:.3rem; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.process-steps-grid.timeline { position:relative; }
@media (min-width:1100px){
  .process-steps-grid.timeline { grid-template-columns: repeat(5,1fr); position:relative; }
  .process-steps-grid.timeline::before { content:""; position:absolute; top:16px; left:0; right:0; height:2px; background:var(--main-petrol); opacity:.5; }
  .process-steps-grid.timeline .process-step { overflow:visible; }
  .process-steps-grid.timeline .process-step .step-number { position:relative; z-index:2; }
  .process-steps-grid.timeline .process-step:not(:last-child)::after { display:none; }
}
.process-note { margin-top:1.2rem; font-size:0.85rem; color:var(--main-grey); letter-spacing:.2px; }
/* Additional spacing between benefits and process section on service page */
.benefits-section + .content-section.card { margin-top:3.5rem; }
@media (max-width:900px){ .benefits-section + .content-section.card { margin-top:2.8rem; } }
/* Full-width benefits section on service page */
.benefits-section { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding:4.2rem 1.5rem 3.8rem; margin-top:4.2rem; overflow:hidden; background:
  radial-gradient(900px 600px at 10% 10%, color-mix(in oklab, var(--accent-turquoise) 12%, transparent), transparent 70%),
  linear-gradient(135deg, #FFFFFF 0%, color-mix(in oklab, var(--main-petrol) 8%, #ffffff 92%) 55%, #FFFFFF 100%);
  backdrop-filter: blur(2px);
}
@media (max-width:900px){ .benefits-section { padding:3rem 1rem 3rem; margin-top:3rem; } }
.benefits-section .inner { max-width:var(--layout-max); margin:0 auto; }
.benefits-heading { text-align:center; margin:0 0 2.2rem; font-size:clamp(1.55rem,1.15rem + .95vw,2.15rem); color:var(--main-petrol); letter-spacing:.4px; }
.benefits-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
@media (max-width: 600px) {
  .benefits-grid { gap: 1rem; grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .benefits-grid { gap: 0.75rem; }
}
.benefits-grid .feature-card { box-shadow: var(--shadow-sm); }
.benefits-grid .feature-card { text-align:left; }
.benefits-grid .feature-card h3 { text-align:left; }
/* Services section (reusing benefits-section styling with adjusted top spacing) */
.services-section { margin-top:1.6rem; background:none; backdrop-filter:none; padding:2.2rem 1.2rem 2rem; }
@media (max-width:1100px){ .services-section { margin-top:1.4rem; padding:2rem 1rem 1.8rem; } }
@media (max-width:900px){ .services-section { margin-top:1.1rem; padding:1.8rem 0.9rem 1.6rem; } }
/* Tighter heading spacing only for services section */
.services-section .benefits-heading { margin-bottom:1.4rem; }
/* CTA separator spacing equalized to hero->services heading gap per breakpoint */
.cta-band.service-separator { margin-top:1.8rem; margin-bottom:2.5rem; }
@media (max-width:1100px){ .cta-band.service-separator { margin-top:1.6rem; } }
@media (max-width:900px){ .cta-band.service-separator { margin-top:1.3rem; } }

/* Headings back to brand petrol */
#about h2 { color: var(--main-petrol); }
#applications h2 { color: var(--main-petrol); }
#contact h2 { color: var(--main-petrol); }
.welcome-section h2 { color: var(--main-petrol); }
.application-detail-intro h2 { color: var(--main-petrol); }
.application-title { color: var(--main-petrol); }
.shop-category-title { color: var(--main-petrol); }
.faq-section h2 { color: var(--main-petrol); }
form label { color: var(--main-petrol); }

/* Body/descriptive text use body color var(--main-grey = #23272f) */
.application-detail-section ul { color: var(--main-grey); }
.shop-product-specs { color: var(--main-grey); }
form input, form select, form textarea { color: var(--main-grey); }

/* User preference: keep original logo size and position */
.logo-fixed { top: 24px; left: 24px; height: 120px; width: 120px; }
.logo-fixed img, .logo-fixed svg { height: 100%; width: 100%; }
@media (max-width: 600px) { .logo-fixed { top: 8px; left: 8px; height: 88px; width: 88px; } }
/* Make header even slimmer while keeping readability */
header { padding: 0.3rem 0.8rem; }
nav a { font-size: 0.9rem; padding: 0.15rem 0.35rem; }
/* Hide header titles for compact top bar */
.header-row h1,
.header-row .header-logo-link { 
  display: none !important; 
  pointer-events: none !important;
}
/* Reserve space so content doesn't sit under the absolute logo */
@media (min-width: 901px) {
  .header-row { padding-left: 168px; }
}
@media (max-width: 600px) {
  .header-row { padding-left: 96px; }
}

/* a11y: screen-reader-only utility */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 1px, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Shrink-on-scroll header state */
header.header--shrink { padding-top: 0.12rem; padding-bottom: 0.12rem; box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
@media (max-width: 600px) { header.header--shrink { padding-top: 0.1rem; padding-bottom: 0.1rem; } }

/* Contact layout width */
#contact { max-width: var(--layout-max); margin: 0 auto; padding: 0 1rem; }
#contact .form-fieldset + .form-fieldset { margin-top: 1rem; }

/* Grouped option lists (devices/electrodes) */
.option-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .option-groups { grid-template-columns: 1fr; } }
.option-group { border: 1px dashed color-mix(in oklab, var(--main-petrol) 18%, white 82%); border-radius: .6rem; padding: .75rem; background: #fff; }
.option-group-title { margin: 0 0 .5rem; font-size: 1rem; color: var(--main-petrol); }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .4rem .8rem; }
.option-grid .check { padding: .25rem .2rem; }

/* Buttons spacing */
#contact button[type="submit"] { margin-top: .8rem; }

/* Override hero alignment to left align brand, text, and buttons */
.hero .col { text-align: left; }
.hero .brand-lockup { display: flex; flex-direction: column; align-items: flex-start; }
.hero .lead, .hero .actions, .hero .bullets { margin-left: 0; margin-right: auto; }
.hero .actions { flex-direction: row; justify-content: flex-start; }
.hero .actions .btn { margin-right: .6rem; }
.hero .actions .btn:last-child { margin-right: 0; }
.hero .bullets { justify-content: flex-start; }
@media (max-width: 600px) { .hero .actions { flex-direction: column; align-items: flex-start; } .hero .actions .btn { margin-right: 0; } }

/* Hero brand spacing refinement */
.hero .brand-lockup { margin-bottom: .05rem !important; }
.hero .brand-logo-lockup { display:block; margin:0; line-height:0; margin-bottom:-30px; }
.hero p.lead { margin-top:0; }
@media (max-width:700px){ .hero .brand-lockup { margin-bottom:.05rem !important; } .hero .brand-logo-lockup{ margin-bottom:-30px; } }
/* End hero brand spacing refinement */

/* Full-width brand lockup scaling */
.hero .brand-lockup { width:100%; max-width:100%; }
.hero .brand-logo-lockup { 
  width: 100%; 
  max-width: 520px; /* Fixed maximum width like AQUA-BOY image */
  height: auto; 
  aspect-ratio: 520/416; 
  object-fit: contain; 
}
/* End full-width brand lockup scaling */

/* Compact hero adjustments */
.welcome-section.hero { padding: 5.8rem 1.2rem 5.9rem 1.2rem; /* increased by ~100px total vertical space */ }
.hero .container { gap: 1.8rem; }
.hero .brand-logo-lockup { margin-bottom:-22px; max-height:240px; aspect-ratio:auto; }
.hero p.lead { margin: .35rem 0 1rem 0; font-size: clamp(1rem,.95rem + .35vw,1.15rem); }
.hero .actions { margin: .4rem 0 .4rem 0; gap:.5rem; }
.hero .bullets { margin-top:.3rem; gap:.4rem 1rem; }
.hero .bullet { font-size:.9rem; }
@media (max-width:900px){ .welcome-section.hero { padding:2.0rem .8rem 2.1rem .8rem; } .hero .brand-logo-lockup { max-height:200px; margin-bottom:-18px; } }
@media (max-width:600px){ .hero .brand-logo-lockup { max-height:170px; margin-bottom:-14px; } .hero .container { gap:1rem; } }
/* End compact hero adjustments */

/* Hero vertical distribution fix */
.welcome-section.hero { padding: 4rem 1.5rem 3rem; }
.hero .container { align-items: flex-start; }
.hero .col { display: flex; flex-direction: column; gap: 1rem; }
.hero .brand-lockup { margin-bottom: 0 !important; }
.hero .brand-logo-lockup { margin-bottom: 0; max-height: none; }
.hero p.lead { margin: 0; }
.hero .actions { margin: 0; }
.hero-bullets { margin: 0; }
@media (max-width: 900px) { .welcome-section.hero { padding: 3.5rem 1rem 2.5rem; } }
/* End hero vertical distribution fix */

/* Increased spacing between logo lockup and lead text */
.hero .brand-lockup + p.lead { margin-top: 2rem; }

/* Horizontal alignment utility */
.content-wrapper { 
  max-width: var(--layout-max); 
  margin: 0 auto; 
  padding-left: var(--gutter); 
  padding-right: var(--gutter); 
}

@media (max-width: 900px) { 
  .content-wrapper { 
    padding-left: var(--gutter-mobile); 
    padding-right: var(--gutter-mobile); 
  } 
}

/* Apply unified gutter widths */
.features { 
  padding-left: 0; 
  padding-right: 0; 
  max-width: var(--layout-max); 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

#applications .applications-inner { 
  padding-left: var(--gutter); 
  padding-right: var(--gutter); 
}

.aqua-boy-section { 
  padding-left: var(--gutter); 
  padding-right: var(--gutter); 
}

@media (max-width: 900px) {
  #applications .applications-inner, 
  .features, 
  .aqua-boy-section { 
    padding-left: var(--gutter-mobile); 
    padding-right: var(--gutter-mobile); 
  }
}

/* Hero image scaling tweak for small screens */
@media (max-width: 600px) { .hero-device-image { max-width: 360px; margin: 0 auto; } }

/* Hero device image aspect ratio lock */
.hero .hero-media { display:flex; justify-content:center; align-items:center; }
.hero-device-image { 
  width:100%; 
  max-width:520px; 
  aspect-ratio:520/416; 
  height:auto !important; 
  object-fit:contain;
  
  /* === SAFARI IMAGE RENDERING - AUTO für Fotos === */
  image-rendering: auto; /* Natürliches Antialiasing für fotografische Bilder */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@media (max-width:600px){ .hero-device-image { max-width:360px; } }

/* === Brand Graphic Decorative Placements (adjusted again) === */
/* Variant 2 retained (hero::after). Variants 1,3,4,5 removed. */
.hero::after { /* Decorative Graphic Variant 2: bottom-right partial */
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: min(640px, 52vw);
  aspect-ratio: 1040 / 832;
  background: url('images/grafik-1040x832px.svg') bottom right / contain no-repeat;
  opacity: 0.08;
  transform: translate(12%, 18%) rotate(5deg);
  pointer-events: none;
  z-index: 0;
}
@media (max-width:600px){ .hero::after { opacity:0.07; width:70vw; transform:translate(16%,24%) rotate(5deg); } }
.features { position: relative; overflow: hidden; }
/* Removed Variant 3 (.features::before) */
#applications { position: relative; overflow: hidden; }
/* Removed Variant 4 (#applications::before) */
.aqua-boy-section { position: relative; overflow: hidden; }
/* Variant 5 already removed previously */
@media (max-width: 600px) {
  /* Cleaned: removed small-screen rules for variants 3 & 4 */
}
/* === End Brand Graphic Decorative Placements (adjusted again) === */

/* Variant 6 (footer::before) left as-is; can adjust or remove on request */
footer { 
  position: relative; 
  overflow: hidden;
  background-color: var(--deep-blue);
  color: var(--main-white);
  padding: 2rem var(--gutter);
  margin-top: 3rem;
  font-family: 'Montserrat', Arial, sans-serif;
}

footer::before {
  content: '';
  position: absolute;
  left: -5%;
  bottom: -15%;
  width: min(640px, 52vw);
  aspect-ratio: 1040 / 832;
  background: url('images/grafik-1040x832px.svg') center center / contain no-repeat;
  opacity: 0.05;
  transform: scale(0.8) rotate(-15deg);
  pointer-events: none;
  z-index: 0;
}

footer ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  gap: 2rem;
}

footer ul li a {
  color: var(--main-white);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  padding: 0.15rem 0.35rem;
}

footer ul li a::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6px;
  height: 2px;
  background: var(--accent-turquoise);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

footer ul li a:hover {
  color: var(--accent-turquoise);
  text-decoration: none;
}

footer ul li a:hover::after {
  transform: scaleX(1);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

footer .footer-copyright {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Montserrat', Arial, sans-serif;
}

@media (max-width: 600px) {
  footer {
    padding: 1.5rem 1rem;
  }
  
  footer ul {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/* Variant 6 (footer::before) left as-is; can adjust or remove on request */
footer { position: relative; overflow: hidden; }
/* Update small-screen tuning after removals */
@media (max-width: 600px) {
  /* Variant 2 and 6 keep previous mobile adjustments */
}
/* === End Brand Graphic Decorative Placements (adjusted) === */

/* Legal pages alignment fix: center and unify horizontal padding */
.impressum-section,
.privacy-section,
.agb-section {
  max-width: 900px;            /* gleiche Breite wie .main-content */
  margin: 2.5rem auto 2rem;     /* horizontal zentriert */
  padding: 0 1.5rem;            /* konsistenter Innenabstand */
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .impressum-section,
  .privacy-section,
  .agb-section { padding: 0 1rem; margin: 2rem auto 1.5rem; }
}

/* Harmonisiere Überschriften-Stile für Rechtstexte (Datenschutz, AGB, Impressum) */
.privacy-section h1,
.impressum-section h1,
.agb-section h1 {
  font-size: 2rem;
  color: var(--main-petrol);
  margin-bottom: 1.2rem;
  font-weight: 700;
}
.privacy-section h2,
.impressum-section h2,
.agb-section h2 {
  font-size: 1.35rem;
  color: var(--main-petrol);
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
}
.privacy-section h3,
.impressum-section h3,
.agb-section h3 {
  font-size: 1.08rem;
  color: var(--main-petrol);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.privacy-section h4,
.impressum-section h4,
.agb-section h4 {
  font-size: 1rem;
  color: var(--main-petrol);
  margin-top: 1.1rem;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

/* Vereinfachter Stil für Stand/Version-Hinweis */
.last-updated-note {
  margin-top: 1.8rem;
  font-size: 0.78rem; /* etwas kleiner als Fließtext */
  line-height: 1.35;
  color: #555; /* dezenter Ton */
  font-weight: 400;
}

/* === Wizard Layout & UX Enhancement =============================== */
.contact-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 2.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}
@media (max-width: 1150px) { .contact-container { grid-template-columns: minmax(0,1fr) 360px; } }
@media (max-width: 980px) { 
  .contact-container { grid-template-columns: 1fr; } 
  .sidebar-stack { order: 2; } 
  .company-contact-info { order: 3; } 
  .contact-form-container { order: 1; } 
}

.contact-form-container, .wizard-sidebar {
  background: var(--main-white);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.contact-form-container { padding: 1.5rem 1.3rem 2rem; }

.wizard-sidebar {
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
  padding: 1.4rem 1.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  /* Remove sticky/scrollbar for always-top alignment */
}

.sticky-sidebar {
  position: sticky;
  top: 110px;
  height: auto;
  max-height: calc(100vh - 140px);
  overflow: auto;
  scrollbar-width: thin;
}

.wizard-header-inline h3 { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--main-petrol); font-weight: 700; }
.wizard-inline-hint { margin: 0 0 .2rem; font-size: .8rem; line-height: 1.4; color: #4d545c; }

/* Progress bar */
.wizard-progress { display: flex; align-items: center; gap: .8rem; position: relative; margin: .4rem 0 1rem; }
.wizard-progress::before { content: ""; position:absolute; left:0; right:0; top:50%; height:4px; background: linear-gradient(90deg,#e3e8ec,#e3e8ec); transform:translateY(-50%); border-radius:4px; }
.wizard-progress::after { content: ""; position:absolute; left:0; top:50%; height:4px; width: var(--wizard-progress,0%); background: var(--accent-turquoise); transform:translateY(-50%); border-radius:4px; transition: width .4s cubic-bezier(.68,-0.55,.27,1.55); box-shadow:0 0 0 1px rgba(0,0,0,0.04); }
.wizard-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; }
.wizard-step .step-number { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid #cfd6db; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:#5a646e; transition: background .35s, color .35s, border-color .35s, transform .35s; box-shadow:0 2px 4px rgba(0,0,0,0.04); }
.wizard-step .step-label { margin-top:.35rem; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; font-weight:700; color:#6a737c; transition: color .35s; }
.wizard-step.active .step-number { background: var(--accent-turquoise); color:#fff; border-color: var(--accent-turquoise); transform:scale(1.06); box-shadow:0 4px 12px rgba(0,123,143,0.35); }
.wizard-step.active .step-label { color: var(--accent-turquoise); }
.wizard-step.completed .step-number { background: var(--accent-turquoise); color:#fff; border-color: var(--accent-turquoise); box-shadow:0 3px 8px rgba(0,123,143,0.45); }
.wizard-step.completed .step-label { color: var(--accent-turquoise); }

/* Step content */
#wizard-section { position: relative; }
.wizard-step-content { animation: wizardSlideIn .5s cubic-bezier(.68,-0.55,.27,1.55); }
@keyframes wizardSlideIn { 0% { opacity:0; transform: translateY(8px) scale(.98);} 100% { opacity:1; transform: translateY(0) scale(1);} }

/* Selection grids */
.application-selection-grid, .meter-selection-grid, .electrode-selection-grid, .accessory-selection-grid { display:grid; gap: .9rem; }
.application-selection-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
.meter-selection-grid { grid-template-columns: 1fr; }
.electrode-selection-grid { grid-template-columns: 1fr; }
@media (min-width:560px){ .meter-selection-grid, .electrode-selection-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); } }

/* Grouped meter lists (application -> devices) */
.meter-group { 
  background: linear-gradient(180deg,#ffffff,#f8fbfc 75%);
  border:1px solid #e1e6ea;
  border-radius:12px;
  padding:.85rem .85rem 1rem;
  box-shadow:0 2px 4px rgba(10,35,66,0.04);
  display:flex;
  flex-direction:column;
}
.meter-group + .meter-group { margin-top:.9rem; }
.meter-group-title { 
  font-size:.72rem; 
  font-weight:700; 
  letter-spacing:.55px; 
  text-transform:uppercase; 
  color: var(--main-petrol); 
  margin:0 0 .55rem; 
  padding-left:.1rem;
}
.meter-group-items { 
  display:flex; 
  flex-direction:column; 
  gap:.65rem; /* spacing between device cards */
}

/* Cards base (wizard selection only) */
.application-card, .meter-card, .electrode-card { 
  position:relative; 
  display:flex; 
  background:#fff; 
  border:1.5px solid #d7dde1; 
  border-radius: 14px; 
  padding: .85rem .75rem .85rem .75rem; 
  cursor:pointer; 
  transition: border-color .28s, box-shadow .28s, background .28s, transform .35s; 
  box-shadow: var(--shadow-sm); 
  min-height:74px; 
  align-items: flex-start; /* Bessere Ausrichtung */
}

/* Wizard accessory card base (separate from shop .accessory-card) */
.wizard-accessory-card { 
  position:relative; 
  display:flex; 
  background:#fff; 
  border:1.5px solid #d7dde1; 
  border-radius:14px; 
  padding:.85rem .75rem; 
  cursor:pointer; 
  transition: border-color .28s, box-shadow .28s, background .28s, transform .35s; 
  box-shadow: var(--shadow-sm); 
  min-height:74px; 
  align-items:flex-start; 
  flex-direction:row; 
}

/* Spezielle Ausrichtung für Elektroden-Karten */
.electrode-card {
  align-items: flex-start; /* Links ausgerichtet wie Meter-Karten */
  text-align: left; /* Text linksbündig */
  flex-direction: column;
  justify-content: flex-start; /* Inhalt oben beginnen lassen */
  min-height: 90px;
}

.electrode-card .electrode-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Links ausgerichtet */
  text-align: left; /* Text linksbündig */
  width: 100%;
  gap: .2rem;
}

.electrode-card .electrode-name {
  margin-bottom: .15rem;
}

.electrode-card .electrode-description {
  text-align: left; /* Links ausgerichtet */
  line-height: 1.3;
}

/* Meter-Karten auch verbessern */
.meter-card {
  align-items: flex-start;
  min-height: 85px;
}

.meter-card .meter-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: .15rem;
}

/* Wizard accessory cards (isolated from shop accessory-card) */
.wizard-accessory-card { align-items:flex-start; justify-content:flex-start; text-align:left; flex-direction:row; min-height:85px; display:flex; position:relative; }
.wizard-accessory-card .wizard-accessory-info { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; width:100%; gap:.2rem; }
/* Match meter/electrode title styling */
.wizard-accessory-card .wizard-accessory-name { font-size:.82rem; font-weight:700; letter-spacing:.5px; color: var(--main-petrol); margin:0 0 .15rem 0; line-height:1.25; }
.wizard-accessory-card .wizard-accessory-description { font-size:.72rem; line-height:1.25; color:#4d5963; font-weight:500; margin:0; }

/* Hover-Effekte für .application-card, .meter-card, .electrode-card entfernt */
.application-card.selected, .meter-card.selected, .electrode-card.selected, .wizard-accessory-card.selected { border-color: var(--accent-turquoise); background: linear-gradient(135deg, #f0fcfe, #ffffff 42%); box-shadow:0 4px 18px rgba(0,123,143,0.28); }
.application-card:active, .meter-card:active, .electrode-card:active, .wizard-accessory-card:active { transform: translateY(1px) scale(.995); }
.application-card input, .meter-card input, .electrode-card input, .wizard-accessory-card input { 
  position:absolute; 
  opacity:0; 
  pointer-events:auto; /* Changed from none to auto to allow interaction */
  width: 1px; 
  height: 1px; 
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.application-card .card-content { display:flex; flex-direction:column; gap:.25rem; }
.card-title { font-size:.82rem; font-weight:700; letter-spacing:.5px; color: var(--main-petrol); text-transform:uppercase; }
.meter-name { font-size:.82rem; font-weight:700; letter-spacing:.5px; color: var(--main-petrol); /* preserve original casing (e.g., IIIa) */ }
.electrode-name { font-size:.82rem; font-weight:700; letter-spacing:.5px; color: var(--main-petrol); /* no uppercase */ }
.card-description, .meter-range, .meter-description, .electrode-description { font-size:.72rem; line-height:1.25; color:#4d5963; font-weight:500; }
.meter-range { font-weight:700; color: var(--accent-turquoise); margin-bottom:.15rem; }

/* Selection tick - Updated for clear multiple selection */
.application-card::after, .meter-card::after, .electrode-card::after, .wizard-accessory-card::after { 
  content:""; 
  position:absolute; 
  top:8px; 
  right:8px; 
  width:20px; 
  height:20px; 
  border-radius:4px; /* Changed from 50% to 4px for checkbox appearance */
  background: #fff; 
  border:2px solid #cfd6db; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-size:.7rem; 
  font-weight:700; 
  color:#fff; 
  transition: background .35s, border-color .35s, transform .35s; 
  box-shadow:0 2px 4px rgba(0,0,0,.05); 
}

/* Application cards use turquoise (no orange) */
.application-card.selected::after { 
  background: var(--accent-turquoise); 
  border-color: var(--accent-turquoise); 
  box-shadow:0 2px 8px rgba(0,123,143,0.45); 
}

/* Meter and electrode cards also use turquoise */
.meter-card.selected::after, .electrode-card.selected::after, .wizard-accessory-card.selected::after { 
  background: var(--accent-turquoise); 
  border-color: var(--accent-turquoise); 
  box-shadow:0 2px 8px rgba(0,123,143,0.45); 
}

/* Checkmark for all selected cards */
.application-card.selected::after, .meter-card.selected::after, .electrode-card.selected::after, .wizard-accessory-card.selected::after { 
  content:'✓'; 
  font-size:.7rem; 
}

/* Keyboard focus visible */
.application-card:focus-visible, .meter-card:focus-visible, .electrode-card:focus-visible, .wizard-accessory-card:focus-visible { outline:none; box-shadow: var(--focus-ring), 0 4px 14px rgba(0,123,143,0.25); border-color: var(--accent-turquoise); }

/* Wizard navigation */
.wizard-navigation { display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.wizard-navigation .btn { flex:1 1 auto; min-width:120px; font-size:.78rem; letter-spacing:.5px; }

/* Live status (screen-reader) */
#wizard-status { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Small refinements */
.sidebar-stack { display:flex; flex-direction:column; gap:1.8rem; }

/* Mobile adjustments */
@media (max-width: 980px) {
  .wizard-sidebar { position:relative; top:auto; max-height:none; }
  .wizard-progress { margin-top: .2rem; }
  .wizard-navigation .btn { flex: 1 0 calc(50% - .4rem); }
}

/* Printing (hide wizard) */
@media print { .wizard-sidebar { display:none; } }
/* === End Wizard Layout & UX Enhancement =========================== */

/* === Contact Form UI Optimization ================================= */
/* Base form layout */
.contact-form { display:flex; flex-direction:column; gap:1.6rem; }
.contact-form .form-section { 
  background: linear-gradient(180deg,#ffffff,#fafcfd 65%);
  border:1px solid color-mix(in oklab,var(--main-petrol) 14%, white 86%);
  border-radius: var(--radius-md);
  padding:1.25rem 1.15rem 1.35rem;
  box-shadow: 0 2px 6px rgba(10,35,66,0.04);
  position:relative;
}
.contact-form .form-section:not(:first-of-type) { margin-top:.2rem; }
.contact-form .form-section h3 { 
  margin:0 0 var(--form-field-gap); 
  font-size:1rem; 
  letter-spacing:.6px; 
  text-transform:uppercase; 
  font-weight:700; 
  color: var(--main-petrol); 
}

/* Rows & groups */
.form-row { display:flex; flex-wrap:wrap; gap:1.15rem; margin:0; }
.form-row.two-columns .form-group { flex:1 1 260px; }
.form-group { flex:1 1 100%; display:flex; flex-direction:column; gap:.35rem; position:relative; }
.form-group label { font-size:.8rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin:0 0 var(--form-field-gap); }
/* Ausnahme: Checkbox-Labels im Serviceumfang sollen nicht in Versalien erscheinen */
.checkbox-group.multi label { text-transform:none !important; font-size:.85rem; letter-spacing:.3px; }

/* Uniform vertical spacing between all form rows (match horizontal gap) */
.contact-form .form-section .form-row + .form-row { margin-top: 1.15rem; }

/* Controls */
.form-control {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .95rem;
    padding: .78rem .85rem;
    border: 1.5px solid #cfd6db;
    border-radius: .8rem;
    background-color: #fff;
    color: var(--main-grey);
    min-height: 48px;
    width: 100%;
}

.form-control:hover:not(:disabled):not(:focus) {
    border-color: color-mix(in oklab, var(--accent-turquoise) 50%, #cfd6db 50%);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-turquoise);
    box-shadow: var(--focus-ring);
}

.form-control.touched:invalid {
  border-color: var(--main-orange);
  background-color: color-mix(in oklab, var(--main-orange) 4%, white 96%);
}
/* Remove native :invalid styling until field is touched */
.form-control:invalid { background-color:#fff; }

/* Unified error styling (applied either via .error or .touched:invalid) */
.form-control.error,
.form-control.touched:invalid {
  border-color: var(--error-border) !important;
  background: var(--error-bg) !important;
  box-shadow: var(--error-shadow) !important;
}

.form-control.error:focus,
.form-control.touched:invalid:focus {
  border-color: var(--error-border) !important;
  box-shadow: var(--error-shadow-focus) !important;
}

textarea.form-control { resize:vertical; min-height:120px; }
/* Smaller textareas for product details (devices & electrodes) */
#quotation-inquiry-section textarea.form-control { 
  min-height:48px; 
  resize:vertical; 
}
select.form-control { cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%, var(--accent-turquoise) 50%),linear-gradient(135deg,var(--accent-turquoise) 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* Standard form control styles */
.form-control {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: .95rem;
    line-height: 1.35;
    padding: .78rem .85rem;
    border: 1.5px solid #cfd6db;
    border-radius: .8rem;
    background-color: #fff;
    color: var(--main-grey);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) inset;
    transition: border-color .25s, box-shadow .25s;
    min-height: 48px;
    width: 100%;
}

/* Hover state */
.form-control:hover:not(:disabled):not(:focus) {
    border-color: color-mix(in oklab, var(--accent-turquoise) 50%, #cfd6db 50%);
}

/* Focus state */
.form-control:focus {
    outline: none;
    border-color: var(--accent-turquoise);
    box-shadow: var(--focus-ring);
}

/* Disabled state */
.form-control:disabled {
    background-color: #f1f4f6;
    color: #88949d;
    cursor: not-allowed;
}

/* Invalid state - but only show when field was touched */
.form-control:invalid {
    background-color: #fff;
}

/* Show validation styles only after field was touched */
/* (Removed duplicate touched:invalid blocks – unified above) */

/* Request type cards */
.request-type-fieldset { border:0; margin:0; padding:0; }
.fieldset-legend { 
  font-size: 1rem; /* Gleiche Größe wie form-section h3 */
  font-weight: 700; /* Gleiche Stärke wie form-section h3 */
  letter-spacing: .6px; /* Gleicher Abstand wie form-section h3 */
  text-transform: uppercase; /* Gleiche Transformation wie form-section h3 */
  margin: 0 0 var(--form-field-gap); /* Gleicher Abstand wie form-section h3 */
  color: var(--main-petrol); 
}
.request-type-cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.request-card { position:relative; }
.request-card-label { 
  display:flex; flex-direction:column; gap:.45rem; height:100%; cursor:pointer; 
  background:#fff; border:1.5px solid #d7dde1; border-radius:16px; padding:1rem .9rem 1rem; 
  transition: border-color .28s, box-shadow .28s, background .28s, transform .35s; 
  box-shadow: var(--shadow-sm); font-size:.78rem; line-height:1.35;
}
.request-card-label:hover { border-color:var(--accent-turquoise); box-shadow:var(--shadow-md); }
.request-radio { position:absolute; opacity:0; pointer-events:none; }
.request-radio:focus + .request-card-label { outline:none; box-shadow:var(--focus-ring), var(--shadow-md); }
.request-radio:checked + .request-card-label { 
  border-color:var(--accent-turquoise); 
  background:linear-gradient(135deg,#f0feff,#ffffff 55%); 
  box-shadow:0 4px 18px rgba(0,123,143,.28); 
}
/* Request card content styling */
.request-title { 
  font-weight: 700; 
  color: var(--main-petrol); 
  font-size: .85rem; 
  margin-bottom: .3rem; 
}
.request-description { 
  font-weight: 400; /* Explicitly set to normal weight (not bold) */
  color: #4d5963; 
  font-size: .75rem; 
  line-height: 1.25; 
}
.checkbox-group label { flex:1; display:inline; margin-left: .5rem; padding-left: .3rem; }

/* Override legal page privacy layout when inside the form */
.contact-form .privacy-section { max-width:100%; margin:0; padding:1.15rem 1.05rem 1.2rem; }

/* Actions */
.form-actions { display:flex; justify-content:flex-start; margin-top:.4rem; }
.form-actions .btn { min-width:220px; font-size:0.95rem; }

/* Success */
.form-success { 
  margin-top:1.3rem; padding:1.4rem 1.2rem 1.6rem; 
  border:1.5px solid color-mix(in oklab,var(--accent-turquoise) 55%, white 45%); 
  background:linear-gradient(135deg,#f0feff,#ffffff 60%); 
  border-radius: var(--radius-md); text-align:center; 
  box-shadow:0 4px 18px rgba(0,123,143,0.18); 
  animation: formSuccessIn .55s cubic-bezier(.68,-0.55,.27,1.55); 
}
@keyframes formSuccessIn { 0% { opacity:0; transform:translateY(10px) scale(.96);} 100% { opacity:1; transform:translateY(0) scale(1);} }
.success-icon { width:64px; height:64px; margin:0 auto .6rem; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:20px; box-shadow:0 4px 14px rgba(0,123,143,.25); }
.success-icon svg { width:48px; height:48px; fill:var(--accent-turquoise); }
.form-success h3 { margin:.2rem 0 .4rem; font-size:1.05rem; color:var(--accent-turquoise); }
.form-success p { margin:0; font-size:.9rem; color:#46545a; }

/* Adaptive */
@media (max-width:780px){
  .contact-form .form-section { padding:1rem .85rem 1.1rem; }
  .form-row.two-columns .form-group { flex:1 1 100%; }
  .request-type-cards { grid-template-columns:1fr; }
  .form-actions { justify-content:stretch; }
  .form-actions .btn { width:100%; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .form-section, .request-card-label, .form-success { animation:none !important; transition:none !important; }
}
/* === End Contact Form UI Optimization ============================ */

/* === Privacy checkbox - Final fix === */
.privacy-section .checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.privacy-section .checkbox-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.privacy-section .checkbox-group input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 0.2rem !important;
}

.privacy-section .checkbox-group label {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Datenschutz-Checkbox-Label: Zeilenumbruch bündig mit Text nach Checkbox */
.privacy-section .checkbox-group label {
  display: block !important;
  line-height: 1.2 !important;
  text-indent: -2.2em !important;
  padding-left: 2.2em !important;
  word-break: break-word;
}

.privacy-section .error-message {
    margin: 0 !important;
}

/* Datenschutz-Checkbox-Label: Flexbox für bündigen Umbruch */
.privacy-label {
  display: flex;
  align-items: flex-start;
  font-size: 0.78rem;
  line-height: 1.2;
  gap: 0.75rem;
  text-transform: none !important;
}
.privacy-label input[type="checkbox"] {
  margin-top: 0.2em;
  flex-shrink: 0;
}

/* === Form validation and privacy checkbox === */
/* Removed transparency on untouched invalid fields */
/* Keep only touched invalid styling */
.form-control.touched:invalid:not(:focus) {
    border-color: var(--main-orange) !important;
    background-color: color-mix(in oklab, var(--main-orange) 4%, white 96%) !important;
}
/* Ensure untouched invalid fields (required but empty) look normal until user leaves the field */
.form-control:invalid {
    background-color: #fff !important;
    border-color: #cfd6db !important;
}
.form-control:not(.touched):invalid {
    background-color: #fff !important;
    border-color: #cfd6db !important;
}
/* Fix duplicate definitions with spacing error in var(--main-orange) and override earlier copies */
.form-control.touched:invalid {
    border-color: var(--main-orange) !important;
    background-color: color-mix(in oklab, var(--main-orange) 4%, white 96%) !important;
}
/* Simplified form control styles */
.form-control,
.form-control:invalid {
    background-color: #fff;
    border: 1.5px solid #cfd6db;
}

.form-control.touched:invalid {
    border-color: var(--main-orange);
    background-color: color-mix(in oklab, var(--main-orange) 4%, white 96%);
}

.form-control {
    background-color: white;
}

.form-control:invalid {
    background-color: white;
    border-color: #cfd6db;
}

.form-control.touched:invalid {
    border-color: var(--main-orange);
    background-color: color-mix(in oklab, var(--main-orange) 4%, white 96%);
}

.form-control {
    background: #fff;
}

.form-control:invalid {
    background: #fff;
    border-color: #cfd6db;
}

/* Kontaktformular Hinweis kompakter */
.form-hint {
  font-size: 0.92rem;
  color: #4d5963;
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
  padding: 0;
  line-height: 1.4;
}

/* Optional: Abstand zum ersten .form-section noch etwas verringern */
.contact-form .form-hint + .form-section {
  margin-top: 0.5rem;
}

/* Fehlermeldungen im Formular nur bei Fehler anzeigen */
.error-message {
  display: none;
  color: var(--main-orange);
  font-size: 0.93rem;
  margin-top: 0.18rem;
  margin-bottom: 0.1rem;
  line-height: 1.4;
}
.error-message.show {
  display: block;
}

/* Kontaktinformationen: Icon und Überschrift in einer Zeile */
.info-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.info-title-row .info-icon {
  display: flex;
  align-items: center;
}
.info-title-row h4 {
  margin: 0;
}

/* === Image Loading Optimization Styles === */

/* Lazy loading placeholder and transition effects */
.lazy-image,
.lazy-bg {
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Placeholder styling for lazy images */
.lazy-image:not(.loaded) {
  opacity: 0.7;
  filter: blur(2px);
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.lazy-image.loaded {
  opacity: 1;
  filter: none;
}

/* Background image placeholders */
.bg-placeholder {
  background: linear-gradient(135deg, #f5f8fa 0%, #e8eef2 50%, #f5f8fa 100%);
  background-size: 200% 200%;
  animation: gradientShift 2s ease-in-out infinite;
  position: relative;
}

.bg-placeholder::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 123, 143, 0.1);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.bg-loaded {
  background-size: cover;
  animation: none;
}

.bg-loaded::before {
  display: none;
}

/* Error state styling */
.lazy-image.error,
.bg-error {
  opacity: 0.5;
  filter: grayscale(100%);
  background: #f8f8f8;
}

.lazy-image.error::after,
.bg-error::after {
  content: '⚠️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  animation: pulseWarn 1.6s ease-in-out infinite;
}

@keyframes pulseWarn {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.12); }
}

/* Optimize critical path images */
.hero-image,
.brand-logo-lockup {
  /* Prevent layout shift */
  aspect-ratio: 520 / 416;
  object-fit: contain;
}

.application-image {
  /* Prevent layout shift for application cards */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Responsive image optimizations */
img {
  /* Smooth rendering für fotografische Bilder */
  image-rendering: auto;
}

/* Modern browser optimizations */
@supports (aspect-ratio: 1) {
  .hero-device-image {
    aspect-ratio: 520 / 416;
    height: auto;
  }
  
  .aqua-boy-setup-image {
    aspect-ratio: 1040 / 780;
    height: auto;
  }
}

/* Preload critical images with CSS */
body::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background-image: 
    url('images/metronis-schriftzug-1040x832px.svg'),
    url('images/landing-page-image-1040x832px.png');
}

/* Optimize background image loading */
.shop-hero {
  /* Use CSS custom properties for dynamic background switching */
  background-image: var(--hero-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .lazy-image,
  .lazy-bg,
  .bg-placeholder,
  .bg-placeholder::before {
    animation: none !important;
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .bg-placeholder {
    background: #000;
    color: #fff;
  }
  
  .lazy-image:not(.loaded) {
    filter: contrast(1.2);
  }
}

/* Print optimizations */
@media print {
  .lazy-image:not(.loaded),
  .bg-placeholder {
    background: none !important;
    animation: none !important;
  }
  
  .lazy-image:not(.loaded) {
    opacity: 1;
    filter: none;
  }
}

/* Performance hints for critical images */
.critical-image {
  /* Force hardware acceleration for smooth transitions */
  transform: translateZ(0);
  will-change: opacity, filter;
}

/* Memory optimization for large images */
.large-image {
  /* Hint to browser about memory usage */
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* === End Image Loading Optimization Styles === */

/* Contact Form Validation & Error Styling */
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e1e5e9;
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  color: var(--main-grey);
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  outline: none;
}

.form-control:focus {
  border-color: var(--accent-turquoise);
  box-shadow: var(--focus-ring);
}

.form-control.touched {
  border-color: #d1d5db;
}

.form-control.error {
  /* Mirror unified error styling so legacy .error class still works if JS sets it */
  border-color: var(--error-border) !important;
  background: var(--error-bg) !important;
  box-shadow: var(--error-shadow) !important;
}

.form-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-error {
  color: var(--main-orange);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.35rem;
  display: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.form-error.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--main-petrol);
  font-weight: 600;
  font-size: 0.95rem;
}

.form-label.required::after {
  content: ' *';
  color: var(--main-orange);
}

/* Textarea specific styling */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.5;
}

/* Select styling */
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 3rem;
  appearance: none;
}

/* Checkbox styling */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1rem 0;
}

.form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  margin: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--accent-turquoise);
  border-color: var(--accent-turquoise);
}

.form-checkbox input[type="checkbox"]:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.form-checkbox label {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--main-grey);
  cursor: pointer;
  margin: 0;
}

.form-checkbox.error input[type="checkbox"] {
  border-color: var(--main-orange);
}

/* Submit button styling */
.form-submit {
  margin-top: 1.5rem;
}

.form-submit .btn {
  min-width: 160px;
  font-size: 1rem;
  padding: 0.9rem 2rem;
}

/* Success message */
.form-success {
  display: none;
  background: linear-gradient(135deg, #f0fcfe, #ffffff);
  border: 2px solid var(--accent-turquoise);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
  color: var(--main-petrol);
}

.form-success h3 {
  color: var(--accent-turquoise);
  margin: 0 0 1rem 0;
  font-size: 1.3rem;
}

.form-success p {
  margin: 0;
  font-size: 1.05rem;
}

/* Wizard validation message */
.wizard-validation-message {
  background: linear-gradient(135deg, #fff9f7, #ffffff);
  border: 2px solid var(--main-orange);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1rem;
  color: var(--main-orange);
  font-weight: 600;
  font-size: 0.9rem;
  display: none;
  animation: validationSlideIn 0.3s ease;
}

@keyframes validationSlideIn {
  0% { 
    opacity: 0; 
    transform: translateY(-10px) scale(0.98); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* Request type sections */
#quotation-inquiry-section,
#general-inquiry-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

#quotation-inquiry-section[hidden],
#general-inquiry-section[hidden] {
  display: none !important;
}

/* Radio button styling for request type */
.form-radio-group {
  display: flex;
  gap: 2rem;
  margin: 1rem 0;
}

.form-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  margin: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-radio input[type="radio"]:checked {
  border-color: var(--accent-turquoise);
  background: var(--accent-turquoise);
  box-shadow: inset 0 0 0 3px #fff;
}

.form-radio input[type="radio"]:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.form-radio label {
  font-size: 1rem;
  color: var(--main-grey);
  cursor: pointer;
  margin: 0;
  font-weight: 600;
}

@media (max-width: 600px) {
  .form-radio-group {
    flex-direction: column;
    gap: 1rem;
  }
  
  .form-control {
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
  }
  
  .form-submit .btn {
    width: 100%;
  }
}

/* Success Page Styles */
.form-success-page {
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%);
    border-radius: 16px;
    border: 1px solid #bbf7d0;
    margin-top: 2rem;
}

.success-container {
    max-width: 600px;
    margin: 0 auto;
}

.success-animation {
    margin-bottom: 2rem;
}

.checkmark-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    position: relative;
}

.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #22c55e;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #22c55e;
    animation: checkmark-fill 0.4s ease-in-out 0.4s forwards, checkmark-scale 0.3s ease-in-out 0.9s both;
}

.checkmark-circle-bg {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: #22c55e;
    fill: none;
    animation: checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #22c55e;
    stroke-width: 3;
    animation: checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkmark-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes checkmark-fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #22c55e;
    }
}

.success-content {
    animation: fade-in-up 0.6s ease-out 0.3s both;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-title {
    color: #059669;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.success-message {
    color: #374151;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.success-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #d1fae5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-item svg {
    color: #22c55e;
    flex-shrink: 0;
}

.detail-item span {
    color: #374151;
    font-size: 0.95rem;
    font-weight: 500;
}

.success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.success-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-width: 160px;
}

.success-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.success-actions .btn-primary {
    background: #059669;
    color: white;
    border-color: #059669;
}

.success-actions .btn-primary:hover {
    background: #047857;
    border-color: #047857;
}

.success-actions .btn-secondary {
    background: white;
    color: #374151;
    border-color: #d1d5db;
}

.success-actions .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.success-contact-hint {
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 1rem;
}

.success-contact-hint p {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

.success-contact-hint strong {
    color: #374151;
}

.success-contact-hint a {
    color: #059669;
    text-decoration: none;
    font-weight: 500;
}

.success-contact-hint a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-success-page {
        padding: 2rem 1rem;
        margin-top: 1rem;
    }
    
    .success-title {
        font-size: 1.5rem;
    }
    
    .success-message {
        font-size: 1rem;
    }
    
    .success-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .success-actions .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .success-details {
        max-width: 100%;
    }
}

/* AQUA-BOY DBM I Section */
.aqua-boy-dbm-section {
    background: var(--main-white);
    border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: 2.5rem auto 2.5rem auto;
    padding: 2.5rem var(--gutter) 2.5rem var(--gutter);
    max-width: var(--layout-max);
    font-size: 1.08rem;
}

.aqua-boy-dbm-section h2 {
    color: var(--main-petrol);
    margin-bottom: 1.2rem;
    font-size: 2rem;
}

.aqua-boy-dbm-section h3 {
    color: var(--main-petrol);
    margin-top: 1.5rem;
    margin-bottom: 0.7rem;
    font-size: 1.2rem;
}

.aqua-boy-dbm-section p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #444;
    font-size: 1.1rem;
}

.aqua-boy-dbm-section ul {
    margin-left: 1.2rem;
    margin-bottom: 1.2rem;
}

.aqua-boy-dbm-section ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.aqua-boy-dbm-section strong {
    color: var(--accent-turquoise);
}

.aqua-boy-dbm-figure {
    margin: 2rem auto 0;
    padding: 0;
    max-width: var(--layout-max);
}

.aqua-boy-dbm-setup-image {
    max-width: 560px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

@media (max-width: 700px) {
    .aqua-boy-dbm-section {
        padding: 1.2rem 1rem 1.2rem 1rem;
        font-size: 0.98rem;
    }
    
    .aqua-boy-dbm-section h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 600px) {
    .aqua-boy-dbm-figure {
        margin-top: 1.6rem;
        max-width: 100%;
    }
}

/* === Modern Product Showcase Styles === */

/* Products Section Layout */
.products-showcase {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 4rem 0;
  background: linear-gradient(180deg, #f8fafb 0%, var(--main-bg) 100%);
  margin-top: 3rem;
}

.products-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.products-header {
  text-align: center;
  margin-bottom: 3rem;
}

.products-header h2 {
  color: var(--main-petrol);
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.products-intro {
  color: var(--main-grey);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Product Category Styling */
.product-category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-turquoise);
}

.category-icon {
  font-size: 1.2rem;
}

/* Hero Product (AQUA-BOY) */
.product-hero {
  background: var(--main-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); /* vereinheitlicht mit Piccolo-Karte */
  margin-bottom: 3rem;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 12%, white 88%);
  overflow: hidden;
}

/* Vereinheitlichte Basis für Hero & Premium Karten */
.product-hero-content,
.product-premium-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem;
  box-sizing: border-box;
}
.product-hero-visual { display: flex; align-items: center; justify-content: center; }

.product-hero-info h3 {
  color: var(--main-petrol);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.product-highlight {
  color: var(--main-grey);
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.product-specs-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafb, #ffffff);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--accent-turquoise) 20%, white 80%);
}

.spec-item {
  text-align: center;
}

.spec-label {
  display: block;
  font-size: 0.85rem;
  color: var(--main-grey);
  margin-bottom: 0.25rem;
}

.spec-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-turquoise);
}

.product-features {
  margin-bottom: 2rem;
}

.feature-item {
  color: var(--main-grey);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.product-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.product-image-main {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.product-image-premium, .product-image-main, .product-image-compact {
  transition: max-width .25s ease;
}
@media (max-width: 1100px) {
  /* moderate reduce when layout may soon stack */
  .product-hero-content .product-image-main,
  .product-premium-content .product-image-premium,
  .product-compact-content .product-image-compact { max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) {
  /* stacked layout: prevent oversized images dominating vertical scroll */
  .product-hero-content .product-image-main,
  .product-premium-content .product-image-premium,
  .product-compact-content .product-image-compact { max-width: clamp(280px, 75%, 440px); }
}
@media (max-width: 600px) {
  /* small phones: further trim */
  .product-hero-content .product-image-main,
  .product-premium-content .product-image-premium,
  .product-compact-content .product-image-compact { max-width: clamp(220px, 72vw, 360px); }
}

/* Premium Product (AQUA-BOY DBM I) */
 .product-premium {
  background: var(--main-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); /* vereinheitlicht mit Piccolo-Karte */
  margin-bottom: 3rem;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 12%, white 88%);
  overflow: hidden;
}

/* Konsistente Reihenfolge Premium: Text immer vor Bild */
.product-premium-content { grid-auto-flow: dense; }
.product-premium-info { order: 1; }
.product-premium-visual { order: 2; }
/* Entfernt abweichendes Premium-Layout auf sehr großen Screens für Identität */
.product-premium-visual { /* entfernt min-width für bessere Schrumpfbarkeit */
  min-width: 0;
}
.product-premium-info { min-width: 0; }

.product-premium-info h3,
.product-hero-info h3 {
  color: var(--main-petrol);
  font-size: 1.8rem; /* identisch */
  font-weight: 700;
  margin-bottom: 1rem;
}

.included-accessories {
  margin-bottom: 2rem;
}

.included-accessories h4 {
  color: var(--main-petrol);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.accessories-grid { /* zurück zu Grid für konsistente Spalten wie bei anderen Kacheln */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
}
.accessory-item { /* Entfernung flex-Sizing */
  min-width: 0;
}

/* Spezielles kompakteres Raster für Premium-Lieferumfang (6 Items: 3 x 2) */
.product-premium .accessories-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 0.9rem;
}
.product-premium .accessory-item {
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}
/* Optische Angleichung Zubehörblock an Feature-Liste (Hero) */
.product-premium .included-accessories { margin-top: 1.25rem; }
.product-premium .included-accessories h4 { margin-bottom: 0.75rem; font-weight: 600; letter-spacing: .3px; }
@media (max-width: 900px) {
  .product-premium .accessories-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 480px) {
  .product-premium .accessories-grid { grid-template-columns: 1fr 1fr; }
}

.accessory-item {
  background: color-mix(in oklab, var(--accent-turquoise) 10%, white 90%);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--main-petrol);
  font-weight: 500;
}

.product-image-premium { /* vereinheitlicht mit product-image-main */
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* Compact Product (AQUA-PICCOLO) */
.product-compact {
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
  overflow: hidden;
}

.product-compact-content {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
}
.product-compact-visual { display:flex; align-items:center; justify-content:center; }

@media (max-width: 900px) {
  /* ensure visuals centered when stacking */
  .product-hero-content, .product-premium-content, .product-compact-content { justify-items: center; box-sizing: border-box; }
  .product-hero-visual img, .product-premium-visual img, .product-compact-visual img { display:block; margin:0 auto; }
}
@media (max-width: 600px) {
  /* Premium folgt denselben Reduktionsregeln wie Hero über globalen Responsive-Block */
}

.product-compact-info h3 {
  color: var(--main-petrol);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.compact-variants {
  margin-bottom: 1.5rem;
}

.variant-group {
  background: color-mix(in oklab, var(--main-petrol) 8%, white 92%);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--main-grey);
}

.product-image-compact {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Product Details Panels */
.product-details-panel {
  display: none;
  background: linear-gradient(135deg, #f5f8fa, #ffffff);
  border-top: 1px solid color-mix(in oklab, var(--accent-turquoise) 25%, white 75%);
  padding: 2rem 3rem;
  animation: slideDown 0.3s ease-out;
}

.product-details-panel.active {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Spezifische Optimierung: DBM Detailpanel – 2 gleichmäßige Spalten auf großen Screens
   Verhindert, dass der Block "Anwendungsbereiche" alleine unten links hängt */
@media (min-width: 960px) {
  #details-dbm .details-grid {
    grid-template-columns: repeat(2, minmax(340px, 1fr));
    align-items: start;
  }
}

.details-section h4 {
  color: var(--main-petrol);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.details-section p {
  color: var(--main-grey);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.details-section ul {
  color: var(--main-grey);
  line-height: 1.6;
}

.details-section ul li {
  margin-bottom: 0.4rem;
}

/* Button Variants */
.btn-outline {
  background: transparent;
  color: var(--main-petrol);
  border: 2px solid var(--main-petrol);
  box-shadow: none;
}

.btn-outline:hover {
  background: var(--main-petrol);
  color: var(--main-white);
  box-shadow: var(--shadow-sm);
}

/* Responsive Design */
@media (max-width: 900px) {
  .products-inner {
    padding: 0 var(--gutter-mobile);
  }
  
  .product-hero-content,
  .product-premium-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
  
  .product-compact-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .product-specs-preview {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .accessories-grid {
    grid-template-columns: 1fr;
  }
  /* Premium Zubehör ebenfalls strikt einspaltig */
  .product-premium .accessories-grid { grid-template-columns: 1fr !important; }
  
  .product-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .product-actions .btn {
    width: 100%;
    text-align: center;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .product-details-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 600px) {
  .products-showcase {
    padding: 2.5rem 0;
  }
  
  .products-header h2 {
    font-size: 1.6rem;
  }
  /* Einheitliche mobile Headline-Größe für Hero & Premium */
  .product-hero-info h3,
  .product-premium-info h3 { font-size: 1.5rem; }
  .product-compact-info h3 {
    font-size: 1.2rem;
  }
}

/* === End Modern Product Showcase Styles === */

/* AQUA-PICCOLO Varianten Styling */
.piccolo-variants-overview {
  margin-bottom: 2rem;
}

.piccolo-variants-overview h4 {
  color: var(--main-petrol);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.variants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.variant-card {
  background: linear-gradient(135deg, #f8fafb, #ffffff);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 15%, white 85%);
  border-radius: var(--radius-sm);
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(10, 35, 66, 0.04);
}
.variant-card-actions { margin-top: 0.75rem; display:flex; }
.variant-card-actions .btn { flex:1 1 auto; font-size:0.9rem; padding:0.65rem 0.85rem; }

.variant-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.variant-icon {
  font-size: 1.2rem;
}

.variant-header strong {
  color: var(--main-petrol);
  font-size: 0.9rem;
  font-weight: 700;
}

.variant-models {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 10%, white 90%);
}

.model-range {
  font-weight: 700;
  color: var(--accent-turquoise);
  font-size: 0.75rem;
}

/* Detaillierte Varianten-Ansicht */
.piccolo-variants-detailed h4 {
  color: var(--main-petrol);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: center;
}

.variant-category {
  margin-bottom: 2.5rem;
}

.variant-category h5 {
  color: var(--main-petrol);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.variant-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.variant-detail-card {
  background: var(--main-white);
  border: 1px solid color-mix(in oklab, var(--main-petrol) 18%, white 82%);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  /* Entfernte Hover-Übergänge: kein transform/box-shadow Wechsel mehr */
}

.variant-name {
  color: var(--main-petrol);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid color-mix(in oklab, var(--accent-turquoise) 30%, white 70%);
}

.variant-specs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: linear-gradient(135deg, #f8fafb, #ffffff);
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 8%, white 92%);
}

.spec-row span:first-child {
  font-weight: 600;
  color: var(--main-grey);
  font-size: 0.9rem;
}

.spec-row span:last-child {
  font-weight: 700;
  color: var(--accent-turquoise);
  font-size: 0.9rem;
}


/* Responsive Design für AQUA-PICCOLO */
@media (max-width: 900px) {
  .variants-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .variant-details-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  
  /* removed .common-features-grid */
}

@media (max-width: 600px) {
  .variant-card {
    padding: 0.8rem;
  }
  
  .variant-detail-card {
    padding: 1rem;
  }
  
  /* removed .piccolo-common-features */
  
  .model-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  
  .spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}

/* Product Details Toggle Functionality */
.product-details-toggle {
  background: var(--main-white);
  color: var(--main-petrol);
  border: 2px solid var(--main-petrol);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-details-toggle:hover {
  background: var(--main-petrol);
  color: var(--main-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.product-details-toggle:active {
  transform: translateY(0);
}

/* Product Details Panel Base Styles */
.product-details-panel {
  display: none;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, padding 0.3s ease;
}

.product-details-panel.active {
  display: block;
  opacity: 1;
  max-height: none;
  overflow: visible;
  animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Variant Details Grid Styling */
.variant-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Entfernte doppelte Definition von .variant-detail-card (vereinheitlicht weiter oben) */

.variant-detail-card .card-actions {
  margin-top: 1rem;
  display: flex;
}
.variant-detail-card .card-actions .btn {
  flex: 1 1 auto;
  font-size: 0.85rem;
  padding: 0.55rem 0.75rem;
}
.btn-small { font-size: 0.8rem; padding: 0.5rem 0.7rem; }

/* Hover-Effekt für .variant-detail-card entfernt */

.variant-name {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--main-petrol);
  border-bottom: 2px solid var(--accent-turquoise);
  padding-bottom: 5px;
}

.variant-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

.spec-row span:first-child {
  font-weight: 500;
  color: #666;
}

.spec-row span:last-child {
  font-weight: 600;
  color: var(--accent-turquoise);
}

/* Common Features Grid */
.common-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.feature-item {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  /* Transition entfernt um jegliche Hover-Wahrnehmung zu eliminieren */
}

/* Hover-Effekt für .feature-item entfernt */

.feature-item strong {
  color: var(--accent-turquoise);
  display: block;
  margin-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .variant-details-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .common-features-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .variant-details-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .common-features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .product-details-panel {
    padding: 15px;
    margin-top: 15px;
  }
  
  .variant-detail-card {
    padding: 15px;
  }
  
  .feature-item {
    padding: 12px;
  }
}

/* Ensure proper button styling in product actions */
.product-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 15px;
  flex-wrap: wrap;
}

/* Twin CTA pair (Piccolo) */
.cta-pair {
  display: flex;
  gap: 0.75rem;
  flex: 1 1 100%;
}
.cta-pair .btn {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .cta-pair { flex-direction: column; }
  .cta-pair .btn { width: 100%; }
}

.product-actions .btn {
  flex: 0 1 auto;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .product-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .product-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Piccolo Info Card Styling */
.piccolo-info-card {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9ff 100%);
  border: 2px solid var(--accent-turquoise);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.piccolo-icon {
  margin-bottom: 15px;
}

.piccolo-icon svg {
  color: var(--accent-turquoise);
  width: 48px;
  height: 48px;
}

.piccolo-info-card h4 {
  color: var(--main-petrol);
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.piccolo-info-card p {
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.piccolo-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.feature-badge {
  background: var(--accent-turquoise);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-block;
}

/* Mixed Selection Info Styling */
.mixed-selection-info {
  margin-bottom: 25px;
}

.info-section {
  background: #f8f9fa;
  border-left: 4px solid var(--accent-turquoise);
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 0 6px 6px 0;
}

.info-section.piccolo-note {
  background: linear-gradient(90deg, #e8f5e8 0%, #f0f9ff 100%);
  border-left-color: var(--accent-turquoise);
}

.info-section.electrode-selection {
  background: #fff3e0;
  border-left-color: #ff9800;
}

.info-section h5 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--main-petrol);
}

.info-section p {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.4;
}

.electrode-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

/* Responsive adjustments for Piccolo features */
@media (max-width: 768px) {
  .piccolo-info-card {
    padding: 20px;
  }
  
  .piccolo-features {
    align-items: stretch;
  }
  
  .feature-badge {
    text-align: center;
  }
  
  .electrode-selection-grid {
    grid-template-columns: 1fr;
  }
  
  .info-section {
    padding: 12px 15px;
  }
}

/* DBM Set Info Card Styling */
.dbm-set-info-card {
  background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
  border: 2px solid var(--main-petrol);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.dbm-icon {
  margin-bottom: 15px;
}

.dbm-icon svg {
  color: var(--main-petrol);
  width: 48px;
  height: 48px;
}

.dbm-set-info-card h4 {
  color: var(--main-petrol);
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.dbm-set-info-card p {
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.dbm-electrode-list {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid color-mix(in oklab, var(--main-petrol) 20%, white 80%);
}

.dbm-electrode-list h5 {
  color: var(--main-petrol);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.electrode-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.electrode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.electrode-id {
  font-weight: 700;
  color: var(--accent-turquoise);
  font-size: 0.9rem;
}

.electrode-desc {
  color: #666;
  font-size: 0.85rem;
  text-align: right;
  flex: 1;
  margin-left: 10px;
}

.dbm-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
}

/* DBM Note in Mixed Selection */
.info-section.dbm-note {
  background: linear-gradient(90deg, #f0f4ff 0%, #ffffff 100%);
  border-left-color: var(--main-petrol);
}

/* Responsive adjustments for DBM features */
@media (max-width: 768px) {
  .dbm-set-info-card {
    padding: 20px;
  }
  
  .dbm-electrode-list {
    padding: 15px;
  }
  
  .electrode-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .electrode-desc {
    text-align: left;
    margin-left: 0;
  }
  
  .dbm-features {
    align-items: stretch;
  }
}

/* Accessories Section Styles */
.accessories-section {
    padding: 60px 20px;
    background-color: #f8f9fa;
    margin: 40px 0;
}

.accessories-section .shop-category-title {
    text-align: center;
    margin-bottom: 2.5rem; /* increased from 15px for more space above tiles */
    color: #2c3e50;
    font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2.2rem); /* Align with global h2 sizing */
    font-weight: 600;
}

.accessories-subtitle {
    text-align: center;
    margin-bottom: 40px;
    color: #6c757d;
    font-size: 1.1rem;
    font-weight: 400;
}

.accessories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.accessory-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}
/* (Old) wizard variant removed – wizard now uses dedicated .wizard-accessory-card classes */

/* Hover-Effekt der Zubehör-Karte entfernt */

.accessory-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.accessory-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: transparent; /* Changed from gradient to transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Removed border */
  box-shadow: none; /* Removed shadow */
  padding: 0.5rem;
}

.accessory-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  background: transparent; /* Changed from white to transparent */
  padding: 0.25rem;
  box-shadow: none; /* Removed shadow */
}

.accessory-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #28a745;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.accessory-badge.recommended {
    background: #007bff;
}

.accessory-info {
    flex: 1;
    min-width: 0;
}

.accessory-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
/* Wizard accessory heading styles moved to .wizard-accessory-card */

.accessory-purpose {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.accessory-specs {
    margin-top: 15px;
}

.accessory-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
    font-size: 0.9rem;
}

.accessory-spec-item:last-child {
    border-bottom: none;
}

.accessory-spec-label {
    color: #6c757d;
    font-weight: 500;
}

.accessory-spec-value {
    color: #2c3e50;
    font-weight: 600;
    text-align: right;
}

.accessory-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.accessory-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

.accessory-btn-primary {
    background: #007bff;
    color: white;
}

.accessory-btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.accessory-btn-secondary {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.accessory-btn-secondary:hover {
    background: #e9ecef;
    color: #495057;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .accessories-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .accessory-card {
        padding: 20px;
    }
    
    .accessory-header {
        gap: 15px;
    }
    
    .accessory-image {
        width: 60px;
        height: 60px;
    }
    
    .accessory-name {
        font-size: 1.1rem;
    }
    
    .accessory-actions {
        flex-direction: column;
    }
}

/* Accessory zoom functionality - analogous to electrode zoom (click-based, not hover) */
.zoomable-accessory {
  cursor: zoom-in;
  pointer-events: auto;
}

/* Accessory Zoom Modal */
.accessory-zoom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(35,39,47,0.92);
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  opacity: 0;
}

.accessory-zoom-modal.active {
  display: flex;
  opacity: 1;
  animation: zoomFadeIn 0.35s cubic-bezier(.68,-0.55,.27,1.55);
}

.accessory-zoom-img {
  max-width: 500px;
  width: 80vw;
  max-height: 70vh;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(23,98,126,0.18), 0 2px 16px rgba(0,0,0,0.12);
  background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
  padding: 1.5rem;
  object-fit: contain;
  transition: box-shadow 0.2s, transform 0.2s;
  border: 2px solid var(--main-petrol);
  animation: zoomImageIn 0.4s cubic-bezier(.68,-0.55,.27,1.55);
}

.accessory-zoom-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  z-index: 10001;
  font-weight: bold;
  transition: color 0.2s, transform 0.2s;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.accessory-zoom-close:hover {
  color: var(--accent-turquoise);
  transform: scale(1.1);
}

.accessory-zoom-modal::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .accessory-zoom-img {
    max-width: 95vw;
    max-height: 65vh;
    padding: 1rem;
  }
  
  .accessory-zoom-close {
    top: 12px;
    right: 12px;
    font-size: 1.8rem;
  }
}

/* Make accessory images clickable and focusable */
.accessory-image {
  position: relative;
}

.accessory-image img {
  transition: transform 0.2s ease;
}

/* Electrode highlight simple emphasis */
.electrode-highlight {
  font-weight: 600; /* keep same weight */
  color: var(--accent-turquoise);
  margin: 0 0 0.4rem 0; /* slight space below */
}

/* === Generic Page Layout Cards for Secondary Pages (Angebot, Service, Kontakt) === */
.page-wrapper { max-width: var(--layout-max); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
@media (min-width: 900px){ .page-wrapper { padding: 3.5rem 2rem 5rem; } }
@media (max-width: 600px){ .page-wrapper { padding: 2rem 1rem 3rem; } }
@media (max-width: 400px){ .page-wrapper { padding: 1.5rem 0.75rem 2.5rem; } }

.page-grid { display: grid; gap: 2rem; }
.page-grid.align-start { align-items: start; }
@media (min-width: 1000px){ .page-grid.two-columns { grid-template-columns: minmax(0,1fr) 360px; align-items: start; } }
/* Contact page heading spanning both columns with consistent spacing */

.card { background: #fff; border-radius: 18px; padding: 1.75rem 1.6rem 2.2rem; box-shadow: 0 4px 18px -4px rgba(0,0,0,0.1), 0 2px 6px -1px rgba(0,0,0,0.06); position: relative; overflow: hidden; }
.card:not(.no-border)::before { content:""; position:absolute; inset:0; border:1px solid rgba(0,0,0,0.06); border-radius:18px; pointer-events:none; }
.card h2:first-child, .card h3:first-child { margin-top:0; }
.card + .card { margin-top:1.5rem; }

@media (max-width: 600px) {
  .card { padding: 1.5rem 1.2rem 1.8rem; border-radius: 12px; }
}
@media (max-width: 400px) {
  .card { padding: 1.25rem 1rem 1.5rem; border-radius: 8px; }
}

/* Form card refinement */
.card.form-card { padding:2rem 1.75rem 2.4rem; }
@media (min-width: 700px){ .card.form-card { padding:2.25rem 2.25rem 2.75rem; } }
@media (max-width: 600px){ .card.form-card { padding:1.5rem 1.25rem 1.8rem; } }
@media (max-width: 400px){ .card.form-card { padding:1.25rem 1rem 1.5rem; } }

/* Sidebar info card variant */
.info-side-card { background: linear-gradient(145deg,#f7fafc,#eef3f7); box-shadow: 0 2px 10px -2px rgba(0,0,0,0.08); border-radius:16px; padding:1.5rem 1.4rem 1.9rem; font-size:.95rem; line-height:1.5; }
.info-side-card h3 { margin-top:0; font-size:1.05rem; letter-spacing:.5px; text-transform:uppercase; font-weight:700; color: var(--main-petrol); }
.info-side-card p { margin:0 0 .85rem; }

/* Utility spacing */
.stack-md > * + * { margin-top:1.25rem; }
.stack-lg > * + * { margin-top:1.9rem; }

/* Wizard sidebar alignment inside page grid */
.page-grid .wizard-sidebar { position:sticky; top:110px; height:auto; max-height: calc(100vh - 140px); overflow:auto; scrollbar-width: thin; }
@supports (backdrop-filter: blur(6px)) { .page-grid .wizard-sidebar { backdrop-filter: blur(8px); } }

/* (Removed custom wizard refinements to revert to legacy backup styling) */



/* === DOWNLOAD CENTER STYLES === */

/* Downloads Header Section */
.downloads-header {
  text-align: center;
  padding: 4rem 1rem 3rem 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: var(--main-petrol);
  margin-bottom: 0;
  border-bottom: 1px solid rgba(10, 35, 66, 0.08);
}

.downloads-header h1,
.downloads-header h2 {
  margin: 0 0 1.5rem 0;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--main-petrol);
  letter-spacing: -0.5px;
}

.downloads-header p {
  margin: 0;
  font-size: 1.2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: var(--main-grey);
  line-height: 1.7;
  font-weight: 400;
}

/* Downloads List - Kategorienbasiert */
.downloads-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1rem 3rem 1rem;
  max-width: var(--layout-max);
  margin: 0 auto;
}

/* Download Category */
.download-category {
  background: var(--main-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.download-category.direct {
  border-left: 4px solid var(--main-orange);
}

.download-category.variants {
  border-left: 4px solid var(--main-petrol);
}

/* Category Header */
.category-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.category-icon {
  font-size: 3rem;
  opacity: 0.8;
  flex-shrink: 0;
}

.category-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--main-petrol);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.category-info p {
  font-size: 1rem;
  color: var(--main-grey);
  margin: 0;
  line-height: 1.5;
}

/* Direct Downloads (Preisliste) */
.category-downloads {
  padding: 1.5rem 2rem 2rem 2rem;
}

/* Variants Section (Aqua-Boy, Aqua-Piccolo) */
.category-variants {
  padding: 0;
}

.variant-item {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.variant-item:last-child {
  border-bottom: none;
}

.variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--main-white);
}

.variant-header:hover {
  background: rgba(0, 123, 143, 0.02);
}

.variant-info h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--main-petrol);
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.variant-info p {
  font-size: 0.9rem;
  color: var(--main-grey);
  margin: 0;
  line-height: 1.4;
}

.variant-toggle {
  color: var(--main-petrol);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.variant-item.expanded .variant-toggle {
  transform: rotate(180deg);
}

.variant-downloads {
  display: none;
  padding: 0 2rem 1.5rem 2rem;
  background: rgba(0, 123, 143, 0.01);
}

.variant-item.expanded .variant-downloads {
  display: block;
}

/* Download Links */
.download-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--main-bg);
  color: var(--main-petrol);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  border: 1px solid rgba(0,0,0,0.05);
}

.download-link:last-child {
  margin-bottom: 0;
}

.download-link:hover {
  background: var(--main-petrol);
  color: var(--main-white);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
  border-color: var(--main-petrol);
}

.download-icon {
  font-size: 1.5rem;
  opacity: 0.8;
  flex-shrink: 0;
}

.download-info {
  flex: 1;
  min-width: 0;
}

.download-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.lang-badge {
  background: var(--main-petrol);
  color: var(--main-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.file-size {
  font-size: 0.9rem;
  color: var(--main-grey);
  font-weight: 600;
}

.download-link:hover .file-size {
  color: rgba(255,255,255,0.8);
}

.download-version {
  font-size: 0.85rem;
  color: var(--main-grey);
  opacity: 0.8;
}

.download-link:hover .download-version {
  color: rgba(255,255,255,0.7);
}

/* Error States */
.download-error,
.download-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--main-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.download-error h3,
.download-empty h3 {
  color: var(--main-petrol);
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.download-error p,
.download-empty p {
  color: var(--main-grey);
  margin: 0 0 1.5rem 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .downloads-list {
    gap: 1.5rem;
    padding: 0 var(--gutter-mobile) 2rem var(--gutter-mobile);
  }
  
  .downloads-header {
    padding: 3rem var(--gutter-mobile) 2.5rem var(--gutter-mobile);
  }
  
  .downloads-header h1,
  .downloads-header h2 {
    font-size: 2.2rem;
  }
  
  .downloads-header p {
    font-size: 1.1rem;
  }
  
  .category-header {
    padding: 1.5rem;
    gap: 1rem;
  }
  
  .category-icon {
    font-size: 2.5rem;
  }
  
  .category-info h3 {
    font-size: 1.3rem;
  }
  
  .category-downloads {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
  }
  
  .variant-header {
    padding: 1.25rem 1.5rem;
  }
  
  .variant-downloads {
    padding: 0 1.5rem 1.25rem 1.5rem;
  }
  
  .download-link {
    padding: 0.875rem 1.25rem;
    gap: 0.875rem;
  }
  
  .download-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .downloads-header h1,
  .downloads-header h2 {
    font-size: 1.9rem;
  }
  
  .downloads-header p {
    font-size: 1rem;
  }
  
  .category-header {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
  }
  
  .category-icon {
    font-size: 2rem;
  }
  
  .category-info h3 {
    font-size: 1.2rem;
  }
  
  .variant-info h4 {
    font-size: 1.1rem;
  }
  
  .download-link {
    gap: 0.75rem;
  }
  
  .download-icon {
    font-size: 1.25rem;
  }
}

/* === SAFARI IMAGE RENDERING OPTIMIZATIONS === */
/* Safari hat andere Bildskalierungs-Algorithmen als Chrome/Firefox */
/* Diese Regeln lösen Verpixelungsprobleme speziell in Safari */

/* Allgemeine Safari-Bildoptimierung */
img {
  image-rendering: auto; /* Smooth rendering für fotografische Bilder */
}

/* Safari: Hardware-Beschleunigung für bessere Bildqualität */
@supports (-webkit-appearance: none) {
  img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Spezielle Behandlung für Hero-Bilder in Safari */
  .hero-device-image,
  .service-hero-image {
    image-rendering: auto; /* Natürliches Antialiasing */
    -webkit-transform: translateZ(0) scale(1.0001);
    transform: translateZ(0) scale(1.0001);
  }
}

/* ==== ENDE DER DATEI ==== */