.elementor-16167 .elementor-element.elementor-element-5ec700a{--display:flex;}@media(max-width:767px){.elementor-16167 .elementor-element.elementor-element-5ec700a{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-16167 .elementor-element.elementor-element-44141e8 > .elementor-widget-container{margin:-100px 0px 0px 0px;}}/* Start custom CSS *//* ===== RESET ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* ===== VARIABLEN ===== */
:root {
  /* gleicher vertikaler Puffer mobil (oben UND unten) */
  --pad: 118px; /* bei Bedarf 112–124 testen */
}

/* ===== HINTERGRUND ===== */
body {
  background: linear-gradient(135deg, #1e88e5 0%, #ff9800 100%);
  display: flex;
  flex-direction: column;
}

/* ===== LOGO ===== */
.header {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  left: calc(env(safe-area-inset-left) + 16px);
  z-index: 10;
}
.header .logo { height: 40px; width: auto; display: block; }
@media (min-width: 640px) { .header .logo { height: 56px; } }

/* ===== MAIN ===== */
/* Mobile: 1 Bildschirm, kein Scroll */
@media (max-width: 1023.98px) {
  html, body { overflow: hidden; }
  .main {
    height: 100dvh;
    padding: calc(env(safe-area-inset-top) + var(--pad)) 16px
             calc(env(safe-area-inset-bottom) + var(--pad));
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
  }
  .options {
    width: 100%;
    max-width: 880px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;        /* zwei Reihen = 50/50 */
    gap: 14px;
    margin-inline: auto;
    overflow: hidden;
  }
}

/* Desktop/Tablet breit: zwei Spalten, sauber zentriert */
@media (min-width: 1024px) {
  html, body { overflow: auto; }
  .main {
    min-height: 100vh;
    padding: 160px 32px 120px;          /* Luft fürs Logo */
    display: grid;
    place-items: center;
    width: 100%;
  }
  .options {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-inline: auto;                 /* horizontal zentrieren */
  }
}

/* ===== KACHELN ===== */
.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;               /* vertikal zentriert -> gleicher Rand oben/unten */
  gap: 10px;                             /* gleichmäßiger Abstand zwischen Bild/Headline/Text */
  padding: 22px 24px;                    /* gleicher Innenabstand links/rechts */
  border-radius: 22px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
  text-decoration: none;
  color: #111;
  text-align: center;
  min-height: 0;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.option:hover,
.option:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.24);
  outline: none;
}

/* ===== INHALT: MOBILE ===== */
.option img {
  max-width: clamp(136px, 32vw, 188px); /* etwas größer, aber „one-screen“ bleibt */
  height: auto;
  display: block;
}
.option img[alt="Hochglanz Reiniger"] {
  max-width: clamp(148px, 34vw, 200px); /* Hochglanz leicht größer */
}
.option h3 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(19px, 5vw, 22px);
}
.option p {
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
  font-size: clamp(13px, 3.4vw, 15px);
}

/* ===== INHALT: DESKTOP ===== */
@media (min-width: 1024px) {
  .option { padding: 28px 32px; border-radius: 24px; }
  .option img { max-width: clamp(200px, 22vw, 280px); }
  .option img[alt="Hochglanz Reiniger"] { max-width: clamp(216px, 24vw, 300px); }
  .option h3 { font-size: clamp(22px, 2.1vw, 28px); }
  .option p  { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.35; }
}/* End custom CSS */