:root {
  --sl-magenta: #b00068;
  --sl-magenta-dark: #760044;
  --sl-magenta-soft: #fce7f4;
  --sl-ink: #24131d;
  --sl-muted: #746674;
  --sl-line: rgba(93, 44, 73, 0.16);
  --sl-cream: #fff8f2;
  --sl-sand: #f7efe7;
  --sl-white: #ffffff;
  --sl-shadow: 0 24px 80px rgba(67, 24, 48, 0.18);
  --sl-radius-lg: 34px;
  --sl-radius-md: 24px;
  --sl-radius-sm: 16px;
  --sl-max: 1180px;
  --sl-header-height: 104px;
  --sl-header-compact-height: 70px;
  /* Hash-/Anker-Scroll: Offset unter dem fixen Header (wird per JS bei is-compact angepasst). */
  --hp-scroll-padding-top: var(--sl-header-height);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--sl-cream);
}

/* Wie Schwarzes Brett: ein Scrollport; kein parallel scrollendes Document.
   Nur Marketing-Body (index); bei Flutter (html.is-flutter-app) keine Sperre. */
html:not(.is-flutter-app) {
  height: 100%;
}

html:not(.is-flutter-app) body.hp-marketing-page {
  height: 100%;
  overflow: hidden;
}

.hp-viewport-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  scroll-padding-top: var(--hp-scroll-padding-top);
}

/* Unter 760px: Header liegt fixed über dem Scrollport (wie Desktop); scroll-padding aus. */
@media (max-width: 760px) {
  .hp-viewport-scroll {
    scroll-padding-top: 0;
  }
}

html.is-app-booting,
html.is-app-booting body {
  overscroll-behavior-x: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: linear-gradient(135deg, #030303 0%, #141414 48%, #0a0a0a 100%);
}

html.is-blackboard-fast-entry,
html.is-blackboard-fast-entry body {
  overscroll-behavior-x: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #fffaf6;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 8%, rgba(176, 0, 104, 0.12), transparent 34%),
    linear-gradient(180deg, #fffaf6 0%, #fff 44%, #fff7f1 100%);
  color: var(--sl-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Marketing-Index: kein magenta Radial oben links — bei transparentem Header sonst „rosa Schleier“ hinter Logo */
body.hp-marketing-page {
  background: linear-gradient(180deg, #fffaf6 0%, #fff 44%, #fff7f1 100%);
}

body.is-app-booting {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #030303 0%, #141414 48%, #0a0a0a 100%);
}

html.is-app-booting body.hp-marketing-page,
body.hp-marketing-page.is-app-booting {
  background: linear-gradient(135deg, #030303 0%, #141414 48%, #0a0a0a 100%) !important;
}

html.is-app-booting .site-shell,
html.is-app-booting .skip-link,
html.is-app-refreshing .site-shell,
html.is-app-refreshing .skip-link,
html.is-blackboard-fast-entry .site-shell,
html.is-blackboard-fast-entry .skip-link,
body.is-app-booting .site-shell,
body.is-app-booting .skip-link {
  display: none;
}

/* Flutter läuft: Marketing-Site-Shell dauerhaft aus – sonst erscheint das Header-Logo wieder nach flutter-first-frame. */
html.is-flutter-app .site-shell,
html.is-flutter-app .skip-link {
  display: none;
}

html.is-flutter-app .app-loader {
  display: none;
}

html.is-blackboard-fast-entry .app-loader {
  display: none !important;
}

html.is-flutter-app,
html.is-flutter-app body {
  overscroll-behavior-x: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #0a0a0a;
}

html.is-flutter-app.is-blackboard-fast-entry,
html.is-flutter-app.is-blackboard-fast-entry body {
  background: #fffaf6;
}

/* Oeffentliche Vet-Freigabe: nach Flutter-First-Frame darf die helle Landingpage uebernehmen. */
html.is-flutter-app.is-vet-share-flutter-route,
html.is-flutter-app.is-vet-share-flutter-route body {
  background: var(--sl-cream);
}

body > footer {
  display: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

div[id^="cropperView_"] > img {
  max-width: 100% !important;
  height: auto !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-180%);
  border-radius: 999px;
  background: var(--sl-ink);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Unter dem fixen Header (z-index 20), über dem Scroll-Body: fängt Taps zum Schliessen des Mobilmenüs */
.hp-nav-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.hp-nav-menu-backdrop.is-active {
  display: block;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.site-header.is-compact {
  background: var(--sl-white);
  backdrop-filter: none;
  border-bottom-color: var(--sl-line);
  box-shadow: 0 1px 0 rgba(36, 19, 29, 0.05);
}

.nav-wrap,
.section-inner,
.footer-inner {
  width: min(var(--sl-max), calc(100% - 40px));
  margin: 0 auto;
}

.site-header .nav-wrap {
  width: min(100% - 50px, 1640px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--sl-header-height);
  gap: 34px;
  transition: min-height 0.22s ease;
}

.site-header.is-compact .nav-wrap {
  min-height: var(--sl-header-compact-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--sl-ink);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 41px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Exakt gleiche Flaechenfarbe wie .brand-name (var(--sl-magenta)), nicht per Filter approximieren */
.brand-mark-icon {
  display: block;
  width: 66px;
  height: 41px;
  background-color: var(--sl-magenta);
  mask-image: url("/assets/assets/struppilog_logo_darkPurple.png");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/assets/assets/struppilog_logo_darkPurple.png");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.site-header.is-compact .brand-mark {
  width: 44px;
  height: 26px;
}

.site-header.is-compact .brand-mark-icon {
  width: 44px;
  height: 26px;
}

.brand-name {
  display: block;
  color: var(--sl-magenta);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.site-header.is-compact .brand-name {
  font-size: 24px;
}

.brand-claim {
  display: block;
  margin-top: 8px;
  color: var(--sl-muted);
  font-size: 12.96px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.site-header .brand-claim {
  margin-top: 8px;
}

.site-header.is-compact .brand-claim {
  margin-top: 5px;
  font-size: 8.91px;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4vw, 62px);
}

.nav-links a,
.nav-links button {
  color: rgba(36, 19, 29, 0.78);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-header.is-compact .nav-links a,
.site-header.is-compact .nav-links button {
  font-size: 11px;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links button:hover,
.nav-links button:focus-visible {
  color: var(--sl-magenta);
}

.mobile-login {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-install-chip {
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 40px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    rgba(176, 0, 104, 0.92) 0%,
    rgba(224, 0, 131, 0.72) 32%,
    rgba(32, 14, 24, 0.55) 65%,
    rgba(0, 0, 0, 0.35) 88%,
    rgba(0, 0, 0, 0.12) 100%
  );
  box-shadow:
    0 6px 18px rgba(176, 0, 104, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.pwa-install-chip[hidden] {
  display: none !important;
}

.pwa-install-chip-icon {
  position: relative;
  width: 14px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.pwa-install-chip-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.pwa-install-chip:hover,
.pwa-install-chip:focus-visible {
  box-shadow:
    0 8px 22px rgba(176, 0, 104, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  filter: brightness(1.06);
}

.pwa-install-chip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.link-button,
.text-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--sl-ink);
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
}

.link-button {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-header.is-compact .link-button {
  font-size: 11px;
}

.menu-toggle {
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: auto;
  min-width: 40px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    rgba(176, 0, 104, 0.92) 0%,
    rgba(224, 0, 131, 0.72) 32%,
    rgba(32, 14, 24, 0.55) 65%,
    rgba(0, 0, 0, 0.35) 88%,
    rgba(0, 0, 0, 0.12) 100%
  );
  box-shadow:
    0 6px 18px rgba(176, 0, 104, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  box-shadow:
    0 8px 22px rgba(176, 0, 104, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  filter: brightness(1.06);
}

.menu-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.site-header.is-compact .menu-toggle {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 11px;
  gap: 4px;
}

.site-header.is-compact .pwa-install-chip {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 11px;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--sl-magenta) 0%, #e00083 100%);
  box-shadow: 0 8px 22px rgba(176, 0, 104, 0.22);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(176, 0, 104, 0.28);
}

.button.secondary {
  background: #fff;
  color: var(--sl-magenta);
  box-shadow: inset 0 0 0 1px rgba(176, 0, 104, 0.16), 0 14px 28px rgba(61, 22, 43, 0.08);
}

/* Kompakter Primär-Button in der festen Header-Leiste (Desktop) */
.header-login {
  min-height: 36px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(176, 0, 104, 0.2);
}

.site-header.is-compact .header-login {
  min-height: 32px;
  padding: 6px 13px;
  font-size: 10px;
}

.hero {
  position: relative;
  margin-top: 0;
  height: 100vh;
  min-height: 720px;
  isolation: isolate;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
  z-index: 0;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide .hero-inner {
  position: relative;
  z-index: 2;
}

.hero-slide .hero-mobile-content-overlay {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity 0.75s ease;
}

.hero-slide.is-active:not(:first-child):not(.hero-iphone-revealed) .hero-mobile-content-overlay {
  opacity: 0;
}

/* Echte Mobilansichten (Handy, bis 760px): kein iPhone-Mockup in Portrait und Landscape */
@media (max-width: 760px) {
  .hero-slide .hero-mobile-content-overlay,
  .hero-slide.is-active .hero-mobile-content-overlay,
  .hero-slide.is-active.hero-iphone-revealed .hero-mobile-content-overlay,
  .hero-slide.is-active:not(:first-child) .hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 761px) {
  .hero-slide .hero-mobile-content-overlay {
    top: calc(15% + 60px);
    left: 34%;
    width: 18.8%;
    min-width: 200px;
    max-width: 380px;
    height: auto;
    max-height: 70%;
    bottom: auto;
    right: auto;
    transform: none;
    object-position: center center;
  }
}

/* Tablet Hochformat: kein iPhone-Mockup-Overlay; inkl. 1024px-Portrait (sonst Basic-Hero mit Telefon) */
@media (min-width: 431px) and (max-width: 1024px) and (orientation: portrait),
  screen and (min-width: 431px) and (max-width: 1024px) and (max-aspect-ratio: 1/1),
  screen and (min-width: 1024px) and (orientation: portrait) {
  .hero-slide .hero-mobile-content-overlay,
  .hero-slide.is-active .hero-mobile-content-overlay,
  .hero-slide.is-active.hero-iphone-revealed .hero-mobile-content-overlay,
  .hero-slide.is-active:not(:first-child) .hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/*
  Schmales Fenster (Portrait), typisch Desktop-Resize 431–760px: kein iPhone-Mockup.
  Echte Handys liegen i. d. R. unter ~430px CSS-Breite im Portrait (= iPhone 14 Pro Max).
*/
@media (max-width: 760px) and (min-width: 431px) and (orientation: portrait) {
  .hero-slide .hero-mobile-content-overlay,
  .hero-slide.is-active .hero-mobile-content-overlay,
  .hero-slide.is-active.hero-iphone-revealed .hero-mobile-content-overlay,
  .hero-slide.is-active:not(:first-child) .hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Echtes Tablet: Split-View unter 480px CSS-Breite — Overlay per Klasse weiter ausblenden. */
@media (max-width: 479px) and (orientation: portrait) {
  html.hp-marketing-tablet-hardware .hero-slide .hero-mobile-content-overlay,
  html.hp-marketing-tablet-hardware .hero-slide.is-active .hero-mobile-content-overlay,
  html.hp-marketing-tablet-hardware .hero-slide.is-active.hero-iphone-revealed .hero-mobile-content-overlay,
  html.hp-marketing-tablet-hardware .hero-slide.is-active:not(:first-child) .hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-chrome {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.hero-chrome .phone-hitbox {
  pointer-events: auto;
}

.hero-chrome .love-badge {
  pointer-events: none;
}

.hero-dots {
  position: absolute;
  left: 50%;
  /* Sichtbarkeit: 7vh wie gewünscht, aber nie unter dem sichtbaren Viewport (mobiler 100vh-/Chrome-Bug). */
  bottom: max(
    calc(7vh + env(safe-area-inset-bottom, 0px)),
    calc(env(safe-area-inset-bottom, 0px) + 52px)
  );
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.hero-dot {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(36, 19, 29, 0.35);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-dot:hover {
  background: rgba(176, 0, 104, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.28),
    0 1px 3px rgba(255, 255, 255, 0.22);
  transform: scale(1.15);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--sl-magenta);
  outline-offset: 5px;
}

.hero-dot.is-active {
  background: var(--sl-magenta);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.28),
    0 1px 3px rgba(255, 255, 255, 0.22);
  transform: scale(1.2);
}

/* Nach horizontalem Wisch: ein Frame ohne Slide-Transitions, innere Overlays ebenfalls ohne Opacity-Animate */
.hero.hp-hero-slide-instant-settle .hero-slide,
.hero.hp-hero-slide-instant-settle .hero-slide .hero-mobile-content-overlay {
  transition: none !important;
}

/* ≤1024px: Punkt-Navi an Hero-Chrome andocken (absolute), mit Hero mitscrollen — nicht viewport-fixed. */
@media (max-width: 1024px) {
  #heroDots.hero-dots,
  #hero .hero-dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    z-index: 8;
    box-sizing: border-box;
    max-width: calc(100vw - 28px);
    gap: 18px;
    margin-bottom: 15px;
  }

  #heroDots.hero-dots .hero-dot,
  #hero .hero-dots .hero-dot {
    width: 10px;
    height: 10px;
  }

  #heroDots.hero-dots .hero-dot.is-active,
  #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.15);
  }
}

/* Nest Hub u. ä. (breit + flach): kleine 10px-Dots wirken falsch — Desktop-Dot-Größe, absolute in Chrome */
@media (max-width: 1024px) and (orientation: landscape) and (min-width: 901px) and (max-height: 680px),
  screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape)
    and (min-aspect-ratio: 17/10) {
  #heroDots.hero-dots,
  #hero .hero-dots {
    position: absolute;
    bottom: max(
      calc(7vh + env(safe-area-inset-bottom, 0px)),
      calc(env(safe-area-inset-bottom, 0px) + 52px)
    );
    z-index: 8;
    gap: 28px;
    max-width: none;
  }

  #heroDots.hero-dots .hero-dot,
  #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  #heroDots.hero-dots .hero-dot.is-active,
  #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }
}

.hero-dots.hp-hero-dots-hidden {
  /* Hero-Punktnavigation bleibt immer sichtbar (kein Ausblenden per IO/Scroll). */
  visibility: visible;
  opacity: 1;
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }

  .hero-slide .hero-mobile-content-overlay {
    transition: none;
  }
}

.hero::before {
  display: none;
}

.hero-inner {
  position: relative;
  display: block;
  width: min(100% - 50px, 1640px);
  height: 100%;
  min-height: 720px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Volle Hero-Höhe wie die Slides – sonst ist der Chrome-Block nur so hoch wie Hitbox/Badge
   und die Punkt-Navi hängt optisch „in der Luft“. */
.hero-inner.hero-chrome {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-inline: auto;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--sl-magenta);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.hero h1,
.section-heading h2,
.feature-copy h2,
.shelter-copy h2,
.community h2 {
  margin: 0;
  color: var(--sl-ink);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.hero h1 {
  max-width: 100%;
  font-size: clamp(48px, 4.3vw, 76px);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

body.hp-marketing-page .hero-slide:first-child h1 .hp-h1-xr414896-only {
  display: none;
}

.accent {
  color: var(--sl-magenta);
}

.hp-hero-mobile-only {
  display: none;
}

/* Marketing-Hero: Claims/Tagline ohne Textschatten (Phone ≤430 px = iPhone 14 Pro Max; Tablet/Zenbook 431–1024 portrait = Flex-Band). */
body.hp-marketing-page .hero h1,
body.hp-marketing-page .hero-slide .hero-copy h1,
body.hp-marketing-page .hero-slide .hero-copy h1 .hp-hero-mobile-brand,
body.hp-marketing-page .hero-slide .hero-copy .hp-hero-mobile-subline,
body.hp-marketing-page .site-header .brand-claim,
body.hp-marketing-page .hero-lead,
body.hp-marketing-page .hero-questions,
body.hp-marketing-page .hero-yes,
body.hp-marketing-page .hero-no {
  text-shadow: none !important;
}

.hero-lead {
  max-width: 100%;
  margin: clamp(18px, 1.6vw, 26px) 0 0;
  color: #24131d;
  font-size: clamp(17px, 1.22vw, 22px);
  font-weight: 850;
  line-height: 1.48;
}

/*
  Hero Copy: bedingte <br> in .hero-lead, .hero-questions, .hero-yes/.hero-no (Marketing-Tablet-Hochformat).
  - hp-br-tport-sm: 480–780px Portrait (u. a. iPad Mini, Surface Duo); inkl. .hero-yes/.hero-no
  - hp-br-tport-wide: 781–1024px Portrait (größeres iPad hochkant)
  - hp-br-tport-air: 781–1024px Portrait (iPad Air ~820 + iPad Pro 1024×1366; alle mittleren/breiten Tablet-Hochformat-Stufen)
  - hp-br-tport-820-lead: nur 820–852px Portrait (iPad Air ~820×1180), Folie 1 weiterhin am `<br>` nach „liegt“; dieselbe Folie nutzt dort und für „Tierarzt. Es“ / „geht plötzlich um“ auch `hp-br-tport-853-lead` (siehe @media 820–852)
  - hp-br-tport-1024-lead: nur exakt 1024px Breite Portrait (iPad Pro 1024×1366), Folie 1 zwei `<br>`: nach „… liegt“, nach „… geht“ (vor „plötzlich“)
  - hp-br-tport-912: 912–1023px Portrait (Surface Pro 7 u. ä. / Asset 912×1368); eigener @media-Block gekapselt (Zeilen + .hero-copy + CTA): Text −125px ggü. Tablet-Basis, CTA 150px über Folienfuß
  - hp-br-tport-853: 853–911px Portrait (Asus Zenbook Fold u. ä. / Asset 853×1280)
  - hp-br-tport-853-lead: nur 853–911px Portrait, Folie 1 .hero-lead Zeilenumbrüche
  - hp-br-tport-768-lead: nur 761–819px Portrait (iPad Mini ~768×1024 Asset), Folie 1 `.hero-lead`: Umbrüche nach „liegt“, vor „geht“, vor „Sekunden.“ (@media 761–819 kapselt)
  - hp-br-surface-duo-lead: nur Surface Duo ~540×720 Portrait, Folie 1–2 .hero-lead, Folie 3 .hero-lead („Handy -“), Folie 3 Frage „Vorgeschichte …“
  - hp-br-land-short: flaches Querformat (z. B. Nest Hub 1024×600), nur dort sichtbar
  - hp-br-ip-mini: nur ~700–780px Portrait (Mini-spezifisch)
  - hp-br-desktop-wide: nur Desktop ≥1025px (Marketing Hero Volbreite)
  - hp-br-phone-narrow: sehr schmale Handys Portrait (z. B. iPhone SE 375px) — unter 480px greifen hp-br-tport-sm u. a. nicht
  - hp-br-h1-dsk / hp-br-h1-se-only: ausschließlich über die zwei iPhone-SE-@media-Blöcke unter „iPhone SE headline“ (nicht diese Liste)
  - hp-h1-xr414896-only: Folie 1 h1 — drei Claim-Zeilen (gleicher Span): gekapselt u. a. iPhone XR 414×896; 12 Pro 390×844; 14 Pro Max 430×932; Pixel 7 + Galaxy S20 Ultra 412×915; Galaxy A51/A71 412×914; Galaxy S8+ 360×740; Galaxy Z Fold 5 Außen 344×882 (nachfolgende @media-Blöcke)
  - hp-br-lead-se-only: Folie 1 `.hero-lead` (.hp-lead-default) nach „Tierarzt.“ — nur mit SE-/Breakpoint-Logik sichtbar; standardmäßig aus (Liste unten), sonst Doppel-Umbruch mit `hp-br-desktop-wide`
  - hp-br-folio1-se-data: nur Folie 1 .hero-questions — Umbruch nach „alle“ vor „Daten.“; nur iPhone SE 375×667 Portrait sichtbar (Liste unten)
  - hp-br-no-se-only: Folie 1 .hero-no zwischen „Nein.“ / „Hat er“ / „nicht.“; kombiniert mit hp-br-tport-853 auf denselben `<br>`; standardmäßig aus (Liste unten), nur iPhone SE 375×667 Portrait sichtbar
  - hp-lead-nest-hub-max-folio1-only: Folie 1 `.hero-lead` — nur Nest Hub Max (1280 CSS px, Landscape 16∶10); ein `<br>` nach „Tierarzt.“; ohne bedingte `<br>`-Maskierung in `.hp-lead-default`
  Desktop ≥1025: Tablet-/Landscape-<br> bleiben aus; hp-br-desktop-wide hier aktiv.
*/

body.hp-marketing-page .hero-slide:first-child .hero-lead .hp-lead-nest-hub-max-folio1-only {
  display: none;
}

body.hp-marketing-page .hero-slide:nth-child(4) .hp-questions-default-folio4 .hp-folio4-mehr-sicherheit-nest-hub-max-only {
  display: none;
}

body.hp-marketing-page .hero-slide:nth-child(3) .hp-questions-default-folio3 .hp-folio3-q2-nest-hub-max-only,
body.hp-marketing-page .hero-slide:nth-child(3) .hp-questions-default-folio3 .hp-folio3-q3-nest-hub-max-only {
  display: none;
}

body.hp-marketing-page .hero-slide:nth-child(2) .hero-questions .hp-folio2-q1-nest-hub-max-only {
  display: none;
}

body.hp-marketing-page .hero-slide:first-child .hero-questions .hp-folio1-q3-nest-hub-max-only {
  display: none;
}

body.hp-marketing-page .hero-slide:first-child .hero-questions .hp-folio1-q1-nest-hub-max-only {
  display: none;
}
br.hp-br-tport-sm,
br.hp-br-tport-wide,
br.hp-br-tport-air,
br.hp-br-tport-820-lead,
br.hp-br-tport-1024-lead,
br.hp-br-tport-912,
br.hp-br-tport-853,
br.hp-br-tport-853-lead,
br.hp-br-tport-768-lead,
br.hp-br-surface-duo-lead,
br.hp-br-land-short,
br.hp-br-ip-mini,
br.hp-br-desktop-wide,
br.hp-br-phone-narrow,
br.hp-br-lead-se-only,
br.hp-br-folio1-se-data,
br.hp-br-no-se-only {
  display: none;
}

@media (min-width: 1025px) {
  body.hp-marketing-page .hero-lead br.hp-br-desktop-wide,
  body.hp-marketing-page .hero-questions br.hp-br-desktop-wide,
  body.hp-marketing-page .hero-yes br.hp-br-desktop-wide,
  body.hp-marketing-page .hero-no br.hp-br-desktop-wide {
    display: revert;
  }
}

@media (min-width: 480px) and (max-width: 780px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-tport-sm,
  body.hp-marketing-page .hero-questions br.hp-br-tport-sm,
  body.hp-marketing-page .hero-yes br.hp-br-tport-sm,
  body.hp-marketing-page .hero-no br.hp-br-tport-sm {
    display: revert;
  }
}

@media (min-width: 781px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-tport-wide,
  body.hp-marketing-page .hero-questions br.hp-br-tport-wide {
    display: revert;
  }
}

@media (min-width: 781px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-tport-air,
  body.hp-marketing-page .hero-questions br.hp-br-tport-air,
  body.hp-marketing-page .hero-yes br.hp-br-tport-air,
  body.hp-marketing-page .hero-no br.hp-br-tport-air {
    display: revert;
  }
}

/*
  Folie 1 .hero-lead nur 820–852 Portrait: Umbrüche wie 853-Folie (853-lead = nach „liegt“, vor „geht“ = nach „Es“, vor „Sekunden.“ = nach „um“)
  + hp-br-tport-820-lead am Bruch nach „liegt“; Reihenfolge nach hp-br-tport-air-MQ.
*/
@media (min-width: 820px) and (max-width: 852px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide:first-child .hero-lead br:not(.hp-br-tport-853-lead):not(.hp-br-tport-820-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead br.hp-br-tport-853-lead,
  body.hp-marketing-page .hero-slide:first-child .hero-lead br.hp-br-tport-820-lead {
    display: revert;
  }

  /*
    iPad Air (~820×1180, nur 820–852 CSS px Portrait): Punkt-Navi in Hero-Chrome (absolute), 20px-Dots — nur in diesem Block.
  */
  body.hp-marketing-page #heroDots.hero-dots,
  body.hp-marketing-page #hero .hero-dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    margin-bottom: 0;
    z-index: 8;
    gap: 28px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    justify-content: center;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot,
  body.hp-marketing-page #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot.is-active,
  body.hp-marketing-page #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }
}

/*
  Folie 1 .hero-lead nur 1024×1366 (CSS 1024px Breite Portrait): nach „Dein Haustier liegt“, dann nach „beim Tierarzt. Es geht“.
  Reihenfolge nach hp-br-tport-air — :first-child schlägt `.hero-lead br.hp-br-tport-air`.
*/
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide:first-child .hero-lead br:not(.hp-br-tport-1024-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead br.hp-br-tport-1024-lead {
    display: revert;
  }
}

/*
  Folie 1 .hero-lead nur iPad Mini 768×1024 Asset (761–819 CSS px Portrait): drei hp-br-tport-768-lead-Umbrüche
  („… liegt“, „Es “ / „geht“, vor „Sekunden.“). Punkt-Navi unten ebenfalls nur in diesem Block — nicht andere Viewports berühren.
*/
@media (min-width: 761px) and (max-width: 819px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide:first-child .hero-lead br:not(.hp-br-tport-768-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead br.hp-br-tport-768-lead {
    display: revert;
  }

  /*
    iPad Mini (~768×1024, nur 761–819 CSS px Portrait): Punkt-Navi in Hero-Chrome (absolute), 20px-Dots — nur hier.
  */
  body.hp-marketing-page #heroDots.hero-dots,
  body.hp-marketing-page #hero .hero-dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    margin-bottom: 0;
    z-index: 8;
    gap: 28px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    justify-content: center;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot,
  body.hp-marketing-page #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot.is-active,
  body.hp-marketing-page #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }
}

@media (min-width: 853px) and (max-width: 911px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-tport-853,
  body.hp-marketing-page .hero-questions br.hp-br-tport-853,
  body.hp-marketing-page .hero-yes br.hp-br-tport-853,
  body.hp-marketing-page .hero-no br.hp-br-tport-853 {
    display: revert;
  }

  /* Folie 1 .hero-lead: Zeilen „liegt“ / „beim Tierarzt. Es“ / „geht plötzlich um“ / „Sekunden.“ — nur <br class="hp-br-tport-853-lead"> */
  body.hp-marketing-page .hero-slide:first-child .hero-lead br:not(.hp-br-tport-853-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead br.hp-br-tport-853-lead {
    display: revert;
  }

  /* CTA „Jetzt kostenlos starten“: 75px über dem Folienunterrand (alle Slides) */
  body.hp-marketing-page .hero-slide .hero-copy {
    bottom: 0;
  }

  body.hp-marketing-page .hero-slide .hero-actions {
    position: absolute;
    bottom: 75px;
    left: 0;
    margin-top: 0;
  }

  /*
    ASUS Zenbook Fold (~853×1280, Portrait nur in diesem Bereich): Punkt-Navi in der Hero-Chrome (absolute),
    keine 10px-Dots (eigene Regeln, keine Kopie anderer Tablet-MQs).
  */
  body.hp-marketing-page #heroDots.hero-dots,
  body.hp-marketing-page #hero .hero-dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    margin-bottom: 0;
    z-index: 8;
    gap: 28px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    justify-content: center;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot,
  body.hp-marketing-page #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot.is-active,
  body.hp-marketing-page #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }
}

@media (orientation: landscape) and (max-height: 680px) and (min-width: 901px) and (max-width: 1280px),
  screen and (min-width: 1280px) and (max-width: 1280px) and (orientation: landscape)
    and (min-aspect-ratio: 8/5) {
  body.hp-marketing-page .hero-lead br.hp-br-land-short,
  body.hp-marketing-page .hero-questions br.hp-br-land-short,
  body.hp-marketing-page .hero-yes br.hp-br-land-short,
  body.hp-marketing-page .hero-no br.hp-br-land-short {
    display: revert;
  }
}

@media (min-width: 700px) and (max-width: 780px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-ip-mini,
  body.hp-marketing-page .hero-questions br.hp-br-ip-mini {
    display: revert;
  }
}

/*
  hp-br-phone-narrow (≤479px Portrait): globaler Fallback ohne Höhen-Media-Query.
*/
@media (max-width: 479px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-phone-narrow,
  body.hp-marketing-page .hero-questions br.hp-br-phone-narrow,
  body.hp-marketing-page .hero-yes br.hp-br-phone-narrow,
  body.hp-marketing-page .hero-no br.hp-br-phone-narrow {
    display: revert;
  }
}

.hero-questions {
  margin-top: clamp(18px, 1.6vw, 25px);
  color: #24131d;
  font-size: clamp(15px, 1.08vw, 19px);
  font-weight: 750;
  line-height: 1.45;
}

.hero-questions p {
  margin: 8px 0;
}

/* Hero-Fragen: immer Normalgewicht — Lead (.hero-lead) bleibt bold; Kicker/Panel unberührt. */
body.hp-marketing-page .hero .hero-questions,
body.hp-marketing-page .hero .hero-questions p {
  font-weight: 400;
}

.hero-no,
.hero-yes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(18px, 1.5vw, 24px) 0 0;
  color: var(--sl-ink);
  font-size: clamp(16px, 1.12vw, 20px);
  font-weight: 950;
}

.hero-no span[aria-hidden="true"],
.hero-yes span[aria-hidden="true"] {
  color: var(--sl-magenta);
  font-size: 34px;
  line-height: 1;
}

/* Folie 4 Desktop: 💪/👏 mittig zur zweizeiligen Kachel; Textblock „Und:“ / „Fehler…“ ohne Extra-Abstand. */
body.hp-marketing-page .hero-slide:nth-child(4) .hero-yes .hp-yes-default-folio4 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body.hp-marketing-page .hero-slide:nth-child(4) .hero-yes .hp-yes-default-folio4-lines {
  display: block;
  line-height: 1.2;
}

@media (min-width: 1025px) {
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-yes .hp-yes-default-folio4 > span[aria-hidden="true"] {
    font-size: calc(1.2em * 2);
    line-height: 1;
    flex-shrink: 0;
  }
}

/* Marketing-Hero (.hero-copy-scrim): Lead, Fragen und Schlusszeile ohne zusätzliche vertikale Lücken — eine durchgehende Spalte. */
body.hp-marketing-page .hero-copy-scrim > .hero-lead {
  margin-bottom: 0;
}

body.hp-marketing-page .hero-copy-scrim > .hero-questions,
body.hp-marketing-page .hero-copy-scrim > .hp-se-folio2-quotes-wrap {
  margin-top: 0;
}

body.hp-marketing-page .hero-copy-scrim .hero-questions {
  margin-top: 0;
}

body.hp-marketing-page .hero-copy-scrim > .hero-no,
body.hp-marketing-page .hero-copy-scrim > .hero-yes {
  margin-top: 0;
}

body.hp-marketing-page .hero-copy-scrim .hp-se-folio2-quotes-wrap .hero-questions,
body.hp-marketing-page .hero-copy-scrim .hp-se-folio2-quotes-wrap .hero-yes {
  margin-top: 0;
}

body.hp-marketing-page .hero-copy-scrim > .hero-questions + .hero-questions {
  margin-top: 0;
}

body.hp-marketing-page .hero-copy-scrim .hero-questions p {
  margin: 0;
}

body.hp-marketing-page .hero-copy-scrim .hero-lead {
  line-height: 1.2;
}

body.hp-marketing-page .hero-copy-scrim .hero-questions,
body.hp-marketing-page .hero-copy-scrim .hero-no,
body.hp-marketing-page .hero-copy-scrim .hero-yes {
  line-height: 1.2;
}

body.hp-marketing-page .hero-copy-scrim .hero-questions p + p {
  margin-top: 0 !important;
}

body.hp-marketing-page .hero-copy .hero-questions p:first-of-type {
  margin-top: 20px !important;
}

body.hp-marketing-page .hero-copy .hero-questions p:nth-of-type(3) {
  margin-bottom: 20px !important;
}

body.hp-marketing-page .hero-copy-scrim .hero-yes,
body.hp-marketing-page .hero-copy-scrim .hero-no {
  margin-top: 0 !important;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(16px, 1.4vw, 22px);
}

.hero-note {
  max-width: 500px;
  margin: 20px 0 0;
  color: rgba(36, 19, 29, 0.64);
  font-size: 13px;
  line-height: 1.55;
}

.hero-copy {
  position: absolute;
  left: 0;
  top: calc(24.2% - 50px);
  z-index: 2;
  width: min(clamp(420px, 34vw, 610px), calc(34% - 20px));
  padding-top: 0;
}

/* Nur Folie 4: breitere Textspalte (langer mehrzeiliger Claim), Folien 1–3 unverändert */
.hero-slide:nth-child(4) .hero-copy {
  box-sizing: border-box;
  width: min(clamp(440px, 41vw, 780px), calc(46% - 28px));
  max-width: 100%;
}

.phone-hitbox {
  position: absolute;
  top: 15%;
  left: 34%;
  width: 18.8%;
  height: 70%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 4;
}

.love-badge {
  position: absolute;
  right: 0.2%;
  bottom: 9.2%;
  width: clamp(126px, 10.5vw, 176px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(118, 0, 68, 0.28));
}

/* Unter Hero: ausklappbare LEAD-Zeilen (Details/Summary), Typo skaliert mit Viewport */
.hp-hero-lead-accordions {
  position: relative;
  z-index: 3;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 36px) 0 clamp(22px, 3.5vw, 40px);
  background: transparent;
}

/* QA-Akkordeon unter dem Hero: auf Marketing-Desktop (≥1025px) ausblenden. */
@media (min-width: 1025px) {
  body.hp-marketing-page #hpHeroLeadAccordions {
    display: none;
  }
}

.hp-hero-lead-accordions-inner {
  width: min(100% - 32px, min(1420px, 94vw));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
}

.hp-hero-lead-accordions-heading {
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0 clamp(12px, 2vw, 18px);
  text-align: left;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--sl-ink);
  line-height: 1.2;
}

.hp-hero-lead-accordions-heading-ink {
  color: var(--sl-ink);
}

.hp-hero-lead-accordions-heading-magenta {
  color: var(--sl-magenta);
}

.hp-hero-lead-item {
  background: transparent;
  overflow: visible;
}

.hp-hero-lead-item.hp-hero-lead-item--hero-slide > .hp-hero-lead-summary {
  box-shadow: inset 3px 0 0 var(--sl-magenta);
}

.hp-hero-lead-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: clamp(14px, 2.2vw, 20px) clamp(14px, 2.4vw, 22px) clamp(14px, 2.2vw, 20px)
    clamp(12px, 2vw, 18px);
  margin: 0;
  font: inherit;
  color: #000;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.hp-hero-lead-summary::-webkit-details-marker {
  display: none;
}

.hp-hero-lead-summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  margin-left: auto;
  border-right: 2px solid rgba(36, 19, 29, 0.45);
  border-bottom: 2px solid rgba(36, 19, 29, 0.45);
  transform: rotate(45deg) translateY(-0.15em);
  transition: transform 0.2s ease;
}

.hp-hero-lead-item[open] > .hp-hero-lead-summary::after {
  transform: rotate(225deg) translateY(0.1em);
}

.hp-hero-lead-summary-row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  row-gap: 0.2em;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.hp-hero-lead-summary-text {
  font-size: clamp(17px, 2.8vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  color: #000;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}

.hp-hero-sublead--summary {
  margin: 0;
  font-size: clamp(17px, 2.8vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--sl-magenta);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}

.hp-hero-lead-panel {
  padding: 0 clamp(14px, 2.4vw, 22px) clamp(16px, 2.5vw, 22px) clamp(12px, 2vw, 18px);
}

.hp-hero-panel-questions {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #000;
}

.hp-hero-panel-questions p {
  margin: 0.5em 0;
}

.hp-hero-panel-questions p:first-child {
  margin-top: 0;
}

.hp-hero-panel-questions p:last-child {
  margin-bottom: 0;
}

.hp-hero-panel-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(14px, 2vw, 18px) 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #24131d;
}

.hp-hero-panel-kicker span[aria-hidden='true'] {
  color: var(--sl-magenta);
  font-size: 1.25em;
  line-height: 1;
}

.trust-strip {
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding: 25px 0;
  background: linear-gradient(135deg, var(--sl-magenta-dark) 0%, var(--sl-magenta) 55%, #e00083 100%);
}

/* Trust unter Hero: Desktop ≥1025px ohne vertikales Padding (Basis bleibt 25px für schmalere Viewports). */
@media (min-width: 1025px) {
  .trust-strip {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.trust-strip .section-inner {
  width: min(100% - 50px, 1640px);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.trust-item {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  min-height: 0;
  background: transparent;
  padding: 24px 26px;
  border-right: 0;
}

.trust-item h2,
.trust-item h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.footer-title {
  margin: 0;
  color: var(--sl-ink);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.trust-item p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.48;
}

.footer-col p {
  margin: 7px 0 0;
  color: var(--sl-muted);
  font-size: 13px;
  line-height: 1.48;
}

/* TikTok-Einbettungen (Marketing-Homepage, Firestore showOnHomepage) */
.hp-tiktok-section {
  position: relative;
  z-index: 3;
  padding: clamp(40px, 5vw, 72px) 0;
  background: #fff;
}

.hp-tiktok-section[hidden] {
  display: none !important;
}

.hp-tiktok-section .section-inner {
  width: min(100% - 50px, 1640px);
  margin-inline: auto;
}

.hp-tiktok-heading {
  margin: 0 0 clamp(24px, 3vw, 36px);
  text-align: left;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--sl-ink);
  line-height: 1.2;
}

.hp-tiktok-heading .accent {
  color: var(--sl-magenta);
}

.hp-tiktok-scroll {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.hp-tiktok-scroll:focus-visible {
  outline: 2px solid var(--sl-magenta);
  outline-offset: 4px;
}

.hp-tiktok-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(300px, 78vw);
  height: min(560px, 72vh);
  border-radius: 16px;
  overflow: hidden;
  background: var(--sl-cream);
  box-shadow: 0 12px 36px rgba(36, 19, 29, 0.08);
  border: 1px solid rgba(176, 0, 104, 0.12);
}

.hp-tiktok-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hp-tiktok-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  color: var(--sl-ink);
  text-align: left;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.94) 0 11%, transparent 24%),
    linear-gradient(145deg, #fce5f0 0%, #fff7f0 48%, #ecd6df 100%);
}

.hp-tiktok-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-tiktok-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(36, 19, 29, 0.2) 100%);
}

.hp-tiktok-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}

.hp-tiktok-poster.has-thumbnail-error .hp-tiktok-fallback {
  opacity: 1;
}

.hp-tiktok-fallback-kicker,
.hp-tiktok-fallback-cta {
  color: var(--sl-magenta);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hp-tiktok-fallback-title {
  max-width: 12ch;
  color: var(--sl-ink);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.hp-tiktok-fallback-cta {
  color: rgba(36, 19, 29, 0.72);
  text-transform: none;
}

.hp-tiktok-poster:focus-visible {
  outline: 3px solid var(--sl-magenta);
  outline-offset: -3px;
}

.hp-tiktok-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(176, 0, 104, 0.94);
  box-shadow: 0 8px 24px rgba(36, 19, 29, 0.24);
  transform: translate(-50%, -50%);
}

.hp-tiktok-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 19px solid #fff;
  transform: translate(-50%, -50%);
}

.section {
  padding: 98px 0;
}

.feature-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--sl-header-height));
  padding-top: clamp(40px, 5vw, 72px);
  width: 100%;
  box-sizing: border-box;
  /* Oben #fff Anschluss an Magenta-Trust-Strip, darunter warmer Verlauf */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fff9f4 34%,
    var(--sl-cream) 58%,
    #ffffff 100%
  );
  overflow-x: clip;
}

.feature-section.section {
  padding-bottom: 0;
}

.feature-section .section-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.feature-panel,
.shelter-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  overflow: hidden;
}

.feature-panel {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.shelter-panel {
  border-radius: 0;
  align-items: stretch;
  background: #fff;
  box-shadow: var(--sl-shadow);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

.feature-image img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  /* Weiß-Karton des Fotos mit Section-Gradient zusammenziehen (wirkt „freigestellt“) */
  mix-blend-mode: multiply;
}

.shelter-image {
  order: 2;
  position: relative;
  min-height: 0;
}

.shelter-image img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.feature-copy {
  align-self: center;
  padding: clamp(34px, 6vw, 72px);
}

.shelter-copy {
  align-self: stretch;
  padding: clamp(34px, 6vw, 72px);
}

.feature-copy h2,
.shelter-copy h2,
.community h2 {
  font-size: clamp(38px, 5vw, 62px);
}

.copy-text {
  margin: 22px 0 0;
  color: rgba(36, 19, 29, 0.74);
  font-size: 17px;
  line-height: 1.7;
}

.check-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(36, 19, 29, 0.86);
  font-weight: 800;
}

.check-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--sl-magenta-soft);
  color: var(--sl-magenta);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(260px, 0.55fr);
  align-items: end;
  gap: 30px;
  margin-bottom: 36px;
}

.section-heading h2 {
  font-size: clamp(38px, 5.2vw, 66px);
}

.section-heading p {
  margin: 0;
  color: rgba(36, 19, 29, 0.72);
  font-size: 17px;
  line-height: 1.65;
}

.hp-mill-water-stack .functions {
  background: transparent;
  padding-bottom: 0;
}

.hp-mill-water-stack .funktionen-split {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

.hp-mill-water-stack .funktionen-offer-pane {
  background: transparent;
  box-shadow: none;
}

.schwarzes-brett-mill {
  padding-top: 0;
  background: transparent;
  overflow-x: clip;
}

.schwarzes-brett-mill .section-inner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.hp-mill-water-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.hp-mill-water-cta {
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: var(--sl-shadow);
  text-decoration: none;
  line-height: 0;
}

.hp-mill-water-cta img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-mill-water-claim {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  --hp-mill-inset: clamp(16px, 4vw, 56px);
  right: var(--hp-mill-inset);
  top: 50%;
  /* iPad Pro ~1366px Höhe: 11.07vh entspricht den früheren ~151px — skaliert mit Viewport */
  transform: translateY(calc(-50% + clamp(115px, 11.07vh, 180px)));
  max-width: min(400px, 44vw);
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--sl-radius-md);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 50px rgba(36, 19, 29, 0.2);
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

.hp-mill-water-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sl-magenta);
}

.hp-mill-water-lead {
  margin: 12px 0 0;
  font-size: clamp(17px, 2.5vw, 28px);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--sl-ink);
  white-space: pre-line;
}

.hp-mill-water-sub {
  margin: 12px 0 0;
  max-width: 36em;
  font-size: clamp(13px, 1.65vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--sl-muted);
}

.hp-mill-water-claim .hp-mill-water-claim-btn {
  margin-top: 13px;
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (max-width: 720px) {
  .hp-mill-water-claim {
    /* Gleiches Abstandsverhältnis wie Tablet: unten + rechts = --hp-mill-inset (4vw) */
    top: auto;
    left: auto;
    transform: none;
    right: var(--hp-mill-inset, clamp(16px, 4vw, 56px));
    bottom: var(--hp-mill-inset, clamp(16px, 4vw, 56px));
    max-width: min(400px, calc(100vw - 2 * clamp(16px, 4vw, 56px)));
  }
}

/* Desktop: Mill-Water / „Schwarzes Brett“-Kachel gesamt 100px nach unten */
@media (min-width: 1025px) {
  .hp-mill-water-claim {
    transform: translateY(calc(-50% + clamp(115px, 11.07vh, 180px) + 100px));
  }
}

.hp-mill-water-cta:focus-visible {
  outline: 3px solid var(--sl-magenta, #b00868);
  outline-offset: 3px;
}

.hp-mill-water-claim:focus-visible {
  outline: 3px solid var(--sl-magenta, #b00868);
  outline-offset: 3px;
}

.functions {
  background: #faf8f5;
}

.funktionen-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--sl-radius-lg);
  background: #faf8f5;
  box-shadow: 0 14px 40px rgba(67, 24, 48, 0.09);
}

.funktionen-highlight {
  display: grid;
  grid-template-columns: minmax(90px, min(25.5%, 158px)) minmax(0, 1fr);
  gap: clamp(14px, 2.8vw, 28px);
  align-items: center;
  box-sizing: border-box;
  padding: clamp(24px, 3.8vw, 44px) clamp(20px, 3vw, 36px);
  min-height: 0;
  min-width: 0;
}

.funktionen-highlight-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.funktionen-highlight-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
}

.funktionen-features-title {
  margin: 0;
  /* Wie .feature-copy h2 („Frau“-Sektion) */
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sl-ink);
}

.funktionen-features-title-accent {
  color: var(--sl-magenta);
}

.funktionen-features-title .funktionen-features-title-sp912 {
  display: none;
}

.funktionen-features-list {
  display: grid;
  gap: clamp(12px, 2.2vw, 18px);
  margin: clamp(22px, 3.2vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.funktionen-features-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(36, 19, 29, 0.9);
  /* Etwas größer/flüssiger wie .copy-text + Feature-Liste */
  font-size: clamp(16px, 2.15vw, 20px);
  line-height: 1.52;
  font-weight: 640;
}

.funktionen-features-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: 0.1em;
  background: var(--sl-magenta-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.funktionen-offer-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.6vw, 18px);
  box-sizing: border-box;
  min-width: 0;
  padding:
    clamp(22px, 3.8vw, 42px)
    clamp(14px, 2.8vw, 28px)
    clamp(22px, 3.8vw, 42px)
    clamp(10px, 2vw, 18px);
  background: #faf8f5;
}

.funktionen-offer-copy {
  align-self: center;
  min-width: 0;
  overflow: visible;
  padding-right: clamp(4px, 1vw, 10px);
}

.funktionen-offer-heading-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 16px);
  font-weight: inherit;
}

.funktionen-offer-title-main {
  display: block;
  max-width: 100%;
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.funktionen-offer-title-line1 {
  color: var(--sl-ink);
}

.funktionen-offer-title-line2 {
  color: var(--sl-magenta);
  white-space: nowrap;
}

@media (max-width: 380px) {
  .funktionen-offer-title-line2 {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .funktionen-offer-title-main {
    font-size: clamp(17px, 5.2vw, 26px);
  }
}

.funktionen-offer-sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.funktionen-offer-gift {
  flex: 0 0 auto;
  color: var(--sl-ink);
}

.funktionen-offer-gift svg {
  display: block;
  width: 34px;
  height: 34px;
}

.funktionen-offer-kicker {
  font-size: clamp(13px, 1.85vw, 17px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--sl-ink);
}

.funktionen-offer-code-label {
  margin: clamp(18px, 2.8vw, 26px) 0 0;
  padding: 0;
  color: rgba(36, 19, 29, 0.78);
  font-size: clamp(14px, 2.05vw, 18px);
  font-weight: 560;
}

.funktionen-offer-code-box {
  box-sizing: border-box;
  margin-top: 10px;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  min-width: clamp(168px, 28vw, 220px);
  padding: clamp(10px, 1.5vw, 13px) clamp(18px, 2.4vw, 22px);
  border-radius: 4px;
  background: var(--sl-magenta-dark);
  color: var(--sl-white);
  font-size: clamp(20px, 2.85vw, 30px);
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.funktionen-offer-rule {
  width: 100%;
  max-width: min(340px, 100%);
  margin: clamp(16px, 2.6vw, 24px) 0 0;
  border: none;
  border-top: 1px solid rgba(176, 0, 104, 0.5);
}

.funktionen-offer-foot {
  margin: clamp(14px, 2.2vw, 20px) 0 0;
  padding: 0;
  color: var(--sl-magenta);
  font-size: clamp(14px, 2.05vw, 18px);
  font-weight: 560;
  line-height: 1.48;
}

.funktionen-offer-foot-line {
  display: block;
}

.funktionen-offer-pane .funktionen-rabbit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: clamp(12px, 2vw, 22px);
  padding-left: 0;
  min-height: 0;
}

@media (min-width: 761px) {
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    margin-right: 50px;
  }
}

.funktionen-offer-pane .funktionen-rabbit img {
  display: block;
  box-sizing: border-box;
  max-width: min(246px, 16.5vw);
  max-height: min(360px, 37.5vh);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: 100% 100%;
}

@media (max-width: 980px) {
  .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(225px, 52.5vw);
    max-height: clamp(199px, 55.5vw, 334px);
  }
}

/*
  Desktop (Marketing): 50vw | 50vw, feste Bandhöhe 65vh; Papagei kleiner, Hase größer.
  (min-width: 1025px — keine Kollision mit Tablet max-width: 1024.)
*/
@media (min-width: 1025px) {
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-split,
  body.hp-marketing-page .funktionen-split {
    grid-template-columns: 50vw 50vw;
    width: 100%;
    border-radius: 0;
    height: 65vh;
    min-height: 65vh;
    max-height: 65vh;
    overflow: hidden;
    align-items: stretch;
  }

  /* Oberkanten bündig: kein vertikales Zentrieren der Textspalten neben Tieren */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    /* Bildspalte ~50 % kleiner als zuvor (62%/540px → 31%/270px) */
    grid-template-columns: minmax(130px, min(31%, 270px)) minmax(0, 1fr);
    align-items: start;
    height: 100%;
    min-height: 0;
    padding-top: clamp(10px, 1.4vh, 16px);
    padding-bottom: clamp(10px, 1.4vh, 16px);
    padding-right: clamp(10px, 1.5vw, 18px);
    padding-left: 0;
    min-width: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start;
    align-items: center;
    min-height: 0;
    max-height: 100%;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    max-height: min(56vh, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
    margin-left: 0;
    transform: none;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
  }

  /* Nach −30 % nochmals −10 %: clamp(27,3.5vw,43) × 0,9 */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(24px, 3.15vw, 39px);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0.04em;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: 14px;
    margin-top: 22px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 800;
    color: rgba(36, 19, 29, 0.86);
    gap: 12px;
    align-items: center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    height: 100%;
    min-height: 0;
    gap: clamp(4px, 0.6vw, 10px);
    padding:
      clamp(10px, 1.4vh, 16px)
      clamp(8px, 1vw, 14px)
      clamp(10px, 1.4vh, 16px)
      clamp(8px, 1vw, 14px);
    min-width: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    padding-right: clamp(2px, 0.6vw, 8px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-heading-block,
  body.hp-marketing-page .funktionen-offer-heading-block {
    gap: clamp(6px, 1vw, 12px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: clamp(24px, 3.15vw, 39px);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0.04em;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-line2,
  body.hp-marketing-page .funktionen-offer-title-line2 {
    white-space: normal;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-gift svg,
  body.hp-marketing-page .funktionen-offer-gift svg {
    width: 26px;
    height: 26px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker {
    font-size: 17px;
    line-height: 1.65;
    font-weight: 800;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label {
    font-size: 17px;
    margin-top: 22px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-box,
  body.hp-marketing-page .funktionen-offer-code-box {
    font-size: clamp(16px, 1.35vw, 20px);
    padding: clamp(8px, 1vw, 11px) clamp(14px, 1.8vw, 18px);
    min-width: clamp(140px, 18vw, 200px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-rule,
  body.hp-marketing-page .funktionen-offer-rule {
    margin-top: 18px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: 17px;
    line-height: 1.7;
    margin-top: 18px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    margin-right: 0;
    padding: clamp(4px, 0.8vh, 10px) 0;
    padding-left: 0;
    align-self: center;
    max-height: 100%;
    justify-content: flex-end;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(738px, min(45vw, 100%));
    max-height: min(58vh, 1080px);
    width: auto;
    height: auto;
    transform: translateX(clamp(-6px, -1.2vw, -20px));
    object-position: 85% center;
  }
}

.blackboard-heading-offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shelter-section {
  background:
    radial-gradient(circle at 80% 20%, rgba(176, 0, 104, 0.12), transparent 30%),
    #fff8f2;
}

.shelter-section.section {
  padding-top: 0;
  padding-bottom: 0;
}

.shelter-section .section-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.shelter-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
}

.community {
  padding: 44px 0;
  background: linear-gradient(135deg, var(--sl-magenta-dark) 0%, var(--sl-magenta) 55%, #e00083 100%);
  color: #fff;
  cursor: pointer;
}

.community:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.community-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
}

/* Kein Extra-Innenpadding: .section-inner liefert die seitlichen Ränder bereits;
   zusätzliches clamp() hat auf Tablet (z. B. 768 Portrait) den Text zu weit nach innen geschoben. */
section.community .section-inner.community-inner,
#community-cta .section-inner {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* Desktop: linke Textkante wie Tierheim (.shelter-copy) */
@media (min-width: 1025px) {
  html:not(.is-flutter-app) body.hp-marketing-page section.community .section-inner.community-inner,
  html:not(.is-flutter-app) body.hp-marketing-page #community-cta .section-inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: clamp(34px, 6vw, 72px);
    padding-right: clamp(34px, 6vw, 72px);
  }
}

.community h2,
.community p {
  color: #fff;
}

.community h2 {
  font-size: clamp(30px, 4vw, 52px);
}

.community p {
  margin: 10px 0 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

.community .button {
  background: #fff;
  color: var(--sl-magenta);
  box-shadow: 0 20px 42px rgba(44, 0, 26, 0.22);
  pointer-events: none;
  user-select: none;
}

.site-footer {
  background: #fff;
  border-top: 1px solid var(--sl-line);
  padding: 54px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(16px, 2.2vw, 32px);
  /* Vormals sehr viel Luft bis zum Logo; Ziel ~50px weniger als früher (~row+padding) */
  row-gap: clamp(14px, 2.2vw, 22px);
  align-items: start;
  justify-items: stretch;
}

/* Unter den vier Spalten: Logo / Claim / Text, zentriert; näher an die Link-Zeile (statt ~50px Luft) */
.footer-col-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(10px, 2vw, 20px);
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.footer-col-brand .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  text-align: center;
  text-decoration: none;
  color: var(--sl-ink);
}

.footer-col-brand .brand > span:not(.brand-mark) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-col-brand .brand-mark,
.footer-col-brand .brand-mark-icon {
  width: 264px;
  height: 164px;
}

.footer-col-brand p {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.footer-col {
  min-width: 0;
}

.footer-col:not(.footer-col-brand) a,
.footer-disabled,
.footer-col:not(.footer-col-brand) button {
  display: block;
  margin-top: 11px;
  color: rgba(36, 19, 29, 0.68);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
}

.footer-col:not(.footer-col-brand) a:hover,
.footer-col:not(.footer-col-brand) button:hover,
.footer-col:not(.footer-col-brand) a:focus-visible,
.footer-col:not(.footer-col-brand) button:focus-visible {
  color: var(--sl-magenta);
}

.footer-disabled {
  color: rgba(36, 19, 29, 0.34);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 0;
  color: rgba(36, 19, 29, 0.55);
  font-size: 13px;
  text-align: center;
}

.app-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  place-items: center;
  background: linear-gradient(135deg, #030303 0%, #141414 48%, #0a0a0a 100%);
  color: #fff;
}

html.is-app-booting .app-loader,
html.is-app-refreshing .app-loader,
body.is-app-booting .app-loader {
  display: grid;
}

.loader-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(378px, 90vw);
  padding: 0;
  text-align: center;
  animation: appBootCardSlide 5s ease-out forwards;
}

.loader-card strong {
  color: #fff;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}

.loader-tagline {
  max-width: min(378px, 90vw);
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.4;
}

.loader-spinner {
  width: min(273px, 65vw);
  height: min(150px, 36vw);
  background: url("/assets/assets/struppilog_logo_white.png") center / contain no-repeat;
  animation: appBootLogoRotate 5s ease-out forwards;
  transform-origin: center;
}

@keyframes appBootCardSlide {
  0% {
    opacity: 0;
    transform: translateY(120px);
  }
  18% {
    opacity: 1;
  }
  72% {
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes appBootLogoRotate {
  0% {
    transform: rotateY(0deg);
  }
  72% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.support-dialog {
  width: min(560px, calc(100% - 30px));
  border: 0;
  border-radius: 26px;
  padding: 0;
  box-shadow: 0 40px 100px rgba(36, 19, 29, 0.34);
}

.support-dialog::backdrop {
  background: rgba(36, 19, 29, 0.48);
  backdrop-filter: blur(8px);
}

.pwa-install-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--sl-ink);
  background: transparent;
  box-shadow: none;
}

.pwa-install-dialog::backdrop {
  background: rgba(36, 19, 29, 0.46);
  backdrop-filter: blur(8px);
}

.pwa-install-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  min-height: 100dvh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    16px
    calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  background: #fff;
}

.pwa-install-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 4;
}

.pwa-install-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding-right: 34px;
  background: #fff;
}

.pwa-install-mark {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 46px;
  border: 3px solid var(--sl-magenta);
  border-radius: 10px;
  box-shadow: inset 0 -8px 0 rgba(176, 0, 104, 0.08);
}

.pwa-install-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: var(--sl-magenta);
  transform: translateX(-50%);
}

.pwa-install-mark::after {
  content: "+";
  position: absolute;
  right: -9px;
  top: -10px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--sl-magenta);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 21px;
  text-align: center;
}

.pwa-install-head h2 {
  margin: 0;
  color: var(--sl-ink);
  font-size: 23px;
  letter-spacing: 0;
  line-height: 1.05;
}

.pwa-install-head p {
  margin: 8px 0 0;
  color: var(--sl-muted);
  font-size: 13px;
  line-height: 1.35;
}

.pwa-install-visual-guide {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pwa-install-visual-guide[hidden] {
  display: none;
}

.pwa-shot-guide {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwa-shot-guide li {
  display: grid;
  gap: 8px;
  margin: 0 -16px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--sl-line);
  border-bottom: 1px solid var(--sl-line);
  background: #fff;
}

.pwa-shot-copy {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
  padding: 0 16px;
}

.pwa-shot-copy span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sl-magenta);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.pwa-shot-copy strong {
  color: var(--sl-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.12;
}

.pwa-shot-guide img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.pwa-shot-guide li:nth-child(2) img,
.pwa-shot-guide li:nth-child(4) img {
  max-height: 220px;
}

.pwa-install-dialog.is-ios-install-guide {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.pwa-install-dialog.is-ios-install-guide .pwa-install-card {
  min-height: 100dvh;
  height: 100dvh;
  max-height: none;
  gap: 14px;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    16px
    calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
}

.pwa-install-dialog.is-ios-install-guide .pwa-install-close {
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
}

.pwa-install-dialog.is-ios-install-guide .pwa-shot-guide {
  gap: 12px;
}

.pwa-install-dialog.is-ios-install-guide .pwa-shot-guide li {
  gap: 8px;
  margin: 0 -16px;
  padding: 10px 0 14px;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: #fff;
}

.pwa-install-dialog.is-ios-install-guide .pwa-shot-copy {
  padding: 0 16px;
}

.pwa-install-dialog.is-ios-install-guide .pwa-shot-guide img,
.pwa-install-dialog.is-ios-install-guide .pwa-shot-guide li:nth-child(2) img,
.pwa-install-dialog.is-ios-install-guide .pwa-shot-guide li:nth-child(4) img {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pwa-install-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwa-install-steps[hidden] {
  display: none;
}

.pwa-install-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--sl-line);
  border-radius: 16px;
  background: #fff8f2;
}

.pwa-install-steps span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sl-magenta);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.pwa-install-steps strong {
  color: var(--sl-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.pwa-install-native,
.pwa-install-done {
  width: 100%;
  min-height: 42px;
}

.pwa-install-native[hidden] {
  display: none !important;
}

.homepage-auth-dialog {
  width: min(390px, calc(100% - 30px));
  border: 0;
  border-radius: 30px;
  padding: 0;
  color: #fff;
  background: transparent;
  box-shadow: 0 40px 100px rgba(36, 19, 29, 0.42);
}

.homepage-auth-dialog::backdrop {
  background: rgba(36, 19, 29, 0.54);
  backdrop-filter: blur(8px);
}

.homepage-auth-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 24px 26px;
  border-radius: 30px;
  background: linear-gradient(180deg, #c00077 0%, #8d0057 100%);
  text-align: center;
}

.homepage-auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #fff;
}

.homepage-auth-logo {
  width: 150px;
  height: auto;
}

.homepage-auth-card h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.homepage-auth-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.homepage-auth-actions {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.homepage-auth-actions[hidden] {
  display: none;
}

.homepage-auth-form {
  display: grid;
  gap: 10px;
  width: 100%;
}

.homepage-auth-form-heading {
  margin: 0 0 4px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.homepage-auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0 0;
}

.homepage-auth-or-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.homepage-auth-or-text {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 600;
}

.homepage-auth-form-micro-legal {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.homepage-auth-form-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.homepage-auth-form-switch[hidden] {
  display: none;
}

.homepage-auth-form-switch-prompt {
  color: rgba(255, 255, 255, 0.78);
}

.homepage-auth-link-inline {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.homepage-auth-link-inline:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.homepage-auth-forgot[hidden] {
  display: none;
}

.homepage-auth-welcome[hidden] {
  display: none;
}

.homepage-auth-forgot {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.homepage-auth-forgot-title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.homepage-auth-forgot-body {
  display: grid;
  gap: 10px;
  width: 100%;
}

.homepage-auth-forgot-label {
  display: grid;
  gap: 5px;
  text-align: left;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  font-weight: 700;
}

.homepage-auth-forgot-body input {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 11px 15px;
  color: #24131d;
  background: #fff;
  outline: none;
  font-size: 16px;
  line-height: 1.25;
}

.homepage-auth-forgot-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.homepage-auth-forgot-field-error {
  margin: 0;
  color: #ffc8dc;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.homepage-auth-forgot-field-error[hidden] {
  display: none;
}

.homepage-auth-form[hidden] {
  display: none;
}

.homepage-auth-form label {
  display: grid;
  gap: 5px;
  text-align: left;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  font-weight: 700;
}

.homepage-auth-form input {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 11px 15px;
  color: #24131d;
  background: #fff;
  outline: none;
  /* iOS Safari: unter 16px Schrift zoomt der Browser beim Focus — wirkt wie „Popup explodiert“. */
  font-size: 16px;
  line-height: 1.25;
}

.homepage-auth-button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
}

.homepage-auth-google-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.homepage-auth-google-mark img {
  display: block;
  width: 18px;
  height: 18px;
}

.homepage-auth-button.google .homepage-auth-google-mark {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
}

.homepage-auth-button.google .homepage-auth-google-mark img {
  width: 18px;
  height: 18px;
}

.homepage-auth-button.google {
  color: #fff;
  background: #0a0a0a;
  box-shadow: none;
}

.homepage-auth-button.google:hover {
  background: #141414;
}

.homepage-auth-button.google:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.homepage-auth-button.email {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.homepage-auth-button.email:hover {
  background: rgba(255, 255, 255, 0.07);
}

.homepage-auth-button.email:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.homepage-auth-welcome-register {
  width: 100%;
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.homepage-auth-welcome-register:hover {
  color: #fff;
}

.homepage-auth-welcome-register:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

.homepage-auth-button.start {
  color: #fff;
  background: linear-gradient(135deg, var(--sl-magenta) 0%, #c40074 100%);
  box-shadow: 0 6px 16px rgba(176, 0, 104, 0.22);
}

.homepage-auth-button[hidden] {
  display: none;
}

.homepage-auth-button:disabled {
  cursor: default;
  opacity: 0.62;
}

.homepage-auth-link {
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.homepage-auth-link[hidden] {
  display: none;
}

.homepage-auth-legal {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.28;
}

.homepage-auth-status {
  min-height: 16px;
  margin: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
}

.support-form {
  padding: 30px;
}

.dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.dialog-head h2 {
  margin: 0;
  color: var(--sl-ink);
  font-size: 26px;
  letter-spacing: -0.04em;
}

.dialog-head p {
  margin: 8px 0 0;
  color: var(--sl-muted);
  line-height: 1.5;
}

.close-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sl-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sl-ink);
  cursor: pointer;
}

.field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.field span {
  color: var(--sl-ink);
  font-size: 13px;
  font-weight: 900;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--sl-line);
  border-radius: 16px;
  background: #fffaf6;
  color: var(--sl-ink);
  padding: 13px 14px;
  outline: none;
  font-size: 16px;
  line-height: 1.35;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: rgba(176, 0, 104, 0.62);
  box-shadow: 0 0 0 4px rgba(176, 0, 104, 0.1);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 1020px), screen and (max-width: 1024px) and (orientation: portrait) {
  .nav-wrap,
  .section-inner,
  .footer-inner {
    width: min(100% - 32px, var(--sl-max));
  }

  .site-header .nav-wrap {
    width: min(100% - 72px, 1100px);
  }

  .hero-slide .hero-inner {
    width: min(100% - 72px, 1100px);
  }

  .nav-links {
    position: fixed;
    top: var(--sl-header-height);
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--sl-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sl-shadow);
    padding: 18px;
  }

  .site-header.menu-open .nav-links {
    display: flex;
  }

  .site-header.is-compact .nav-links {
    top: var(--sl-header-compact-height);
  }

  .mobile-login {
    display: block;
    padding: 0;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .pwa-install-chip:not([hidden]) {
    display: inline-flex;
  }

  .hero {
    height: 100vh;
    min-height: 560px;
  }

  .hero-slide .hero-inner {
    height: 100%;
    min-height: 560px;
  }

  .phone-hitbox {
    top: 15%;
    left: 34%;
    width: 18.8%;
    height: 70%;
  }

  .love-badge {
    right: 26px;
    bottom: 96px;
    width: 128px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .funktionen-split {
    grid-template-columns: 1fr;
  }

  .funktionen-highlight {
    grid-template-columns: 1fr;
    gap: clamp(14px, 4vw, 22px);
  }

  .funktionen-highlight-visual {
    justify-content: center;
  }

  .funktionen-highlight-visual img {
    max-width: min(210px, 39vw);
    margin: 0 auto;
  }

  .funktionen-offer-pane {
    grid-template-columns: 1fr;
    padding: clamp(20px, 4vw, 32px);
  }

  .funktionen-offer-copy {
    padding-right: 0;
  }

  .funktionen-offer-pane .funktionen-rabbit {
    justify-content: center;
    padding: clamp(8px, 2.5vw, 16px);
    min-height: clamp(367px, 94vw, 507px);
  }

  .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(88%, 410px);
    max-height: min(100%, 439px);
    object-position: center;
  }

  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(10px, 1.6vw, 20px);
    row-gap: clamp(14px, 2.2vw, 22px);
  }
}

/* Tablet Querformat: gleiche Kopfzeilen-Logik wie Desktop (kein Overlay-Menü) */
@media (max-width: 1020px) and (min-width: 761px) and (orientation: landscape) {
  .site-header.menu-open::before {
    content: none !important;
    pointer-events: none !important;
  }

  html:not(.is-flutter-app) .site-header.menu-open::before {
    content: none !important;
    pointer-events: none !important;
  }

  .hp-nav-menu-backdrop.is-active {
    display: none !important;
  }

  .nav-links {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .site-header.menu-open .nav-links {
    display: flex !important;
  }

  .mobile-login {
    display: none;
  }

  .menu-toggle {
    display: none;
  }
}

/*
  Nest Hub u. ä.: breiter Quer-Viewport, sehr flache Höhe (z. B. 1024×600).
  Volle Nav-Zeile passt nicht → Hamburger nur für Seitenlinks; „Anmelden“ bleibt als Button in der Leiste (nicht nur im Menü).
  Zweite Bedingung: exaktes 1280×800‑Aspect (dynamic viewport height egal).
*/
@media (orientation: landscape) and (max-height: 680px) and (min-width: 901px) and (max-width: 1280px),
  screen and (min-width: 1280px) and (max-width: 1280px) and (orientation: landscape)
    and (min-aspect-ratio: 8/5) {
  .nav-links {
    position: fixed;
    top: var(--sl-header-height);
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--sl-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sl-shadow);
    padding: 18px;
  }

  .site-header.menu-open .nav-links {
    display: flex;
  }

  .site-header.is-compact .nav-links {
    top: var(--sl-header-compact-height);
  }

  .mobile-login {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  body.hp-marketing-page .brand-claim {
    font-size: 8.1px;
    line-height: 1.22;
    margin-top: 4px;
    letter-spacing: -0.015em;
  }

  /* Hero-Folien: große CLAIM-Zeilen (h1) ~15 % kleiner — gleiche Basis wie .hero h1 */
  body.hp-marketing-page .hero h1 {
    font-size: calc(clamp(48px, 4.3vw, 76px) * 0.85);
  }

  body.hp-marketing-page .nav-wrap {
    gap: 12px;
  }

  body.hp-marketing-page .header-actions {
    flex-shrink: 0;
    gap: 8px;
  }

  body.hp-marketing-page .header-actions .header-login {
    padding: 5px 12px;
    font-size: 11px;
    letter-spacing: 0.05em;
  }

  body.hp-marketing-page .site-header.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
  }
}

@media (max-width: 760px) {
  /*
    Wichtig: kein position:sticky hier — sonst reserviert die Header-Zeile Platz im .site-shell-Flex;
    zusammen mit vollem Hero‑Viewport wirkt dann unten/oben Farbe vom Body durch. fixed überlagert.
  */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }

  .nav-wrap {
    min-height: 68px;
    /* Notch/Dynamic Island: Luft nach oben ohne eigenen weißen Balken – transparent bleibt sichtbar fürs Hero */
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }

  .site-header .nav-wrap {
    width: min(100% - 32px, var(--sl-max));
    background-color: transparent;
  }

  /*
    Mobil-Marketing: Hero genau einen Viewport hoch — nur 100vh, Header fixed darüber, kein Höhen‑Abzug.
  */
  body.hp-marketing-page #hero.hero,
  body.hp-marketing-page section#hero.hero {
    margin-top: 0;
    max-height: none;
    box-sizing: border-box;
    height: 100vh;
    min-height: 100vh;
  }

  body.hp-marketing-page #hero.hero .hero-slides,
  body.hp-marketing-page section#hero.hero .hero-slides {
    min-height: 100%;
  }

  .brand-name {
    font-size: 20px;
  }

  .header-actions .header-login {
    display: none;
  }

  .pwa-install-chip {
    min-width: 40px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 12px;
  }

  .hero-slide .hero-bg img {
    object-position: 62% top;
  }

  /* Nur Slides: Chrome-Overlay (.hero-inner.hero-chrome) nicht mit Slide-Padding verziehen — sonst fehlen u. a. die Hero-Punkte. */
  .hero-slide .hero-inner {
    display: block;
    min-height: 0;
    height: auto;
    width: min(100% - 32px, var(--sl-max));
    padding-top: calc(58px + env(safe-area-inset-top, 0px));
    padding-bottom: 132px;
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 360px);
  }

  .hero h1 {
    font-size: clamp(32px, 10.5vw, 50px);
  }

  .hero-lead {
    font-size: 16px;
  }

  .phone-hitbox {
    display: none;
  }

  .love-badge {
    display: none;
  }

  /* Kein Überlappen mit negativem Margin: Trust-Strip liegt sonst VISUELL über dem Hero‑Boden → „Hero nicht 100vh“. */
  .trust-strip {
    margin-top: 0;
  }

  .trust-grid,
  .feature-panel,
  .shelter-panel,
  .section-heading,
  .community-inner {
    grid-template-columns: 1fr;
  }

  .trust-item {
    min-height: 0;
    padding: 20px;
  }

  .section {
    padding: 70px 0;
  }

  .feature-section {
    padding-top: clamp(40px, 5vw, 72px);
    padding-bottom: 0;
  }

  .feature-image img {
    min-height: 360px;
  }

  .feature-copy,
  .shelter-copy {
    padding: 30px 22px 34px;
  }

  .shelter-image {
    order: 0;
    aspect-ratio: 5 / 3;
    min-height: 0;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .community-inner {
    text-align: left;
  }

  .community .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(10px, 1.6vw, 20px);
    row-gap: clamp(14px, 2.2vw, 22px);
  }

  .footer-bottom {
    display: block;
  }

  /* Nur direkte Kinder (nicht #currentYear u. a.), sonst bricht „© Jahr …“ auseinander */
  .footer-bottom > span {
    display: block;
  }

  .footer-bottom > span + span {
    margin-top: 8px;
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-actions .button {
    width: 100%;
  }
}

/* Marketing-Header: Claim-Zeile auf sehr schmalen Portrait-Phones */
@media (max-width: 479px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page .brand-claim {
    font-size: 8.505px;
    line-height: 1.22;
    margin-top: 5px;
    letter-spacing: -0.024em;
  }
}

/*
  iPhone SE headline (375 CSS px, klassisch kurzes Portrait ~375×667): Gegenstück zu SE-Block — ohne html:not,
  damit Ein-/Ausblenden von .hp-h1-se-only / .hp-lead-se-only nach Flutter-Boot zuverlässig bleibt.
  Aspect-Band statt fixer Höhe (Safari-Dynamic-Viewport).
*/
@media not (
    (max-width: 375px) and (orientation: portrait) and (min-aspect-ratio: 11/20)
      and (max-aspect-ratio: 15/26)
  ) {
  body.hp-marketing-page .hero-slide:nth-child(-n + 3) h1 br.hp-br-h1-se-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(-n + 3) h1 .hp-h1-se-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead .hp-lead-se-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-lead .hp-lead-se-folio2-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) h1 .hp-h1-se-folio2-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) h1 .hp-h1-se-folio3-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) h1 .hp-h1-se-folio4-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-lead .hp-lead-se-folio3-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-lead .hp-lead-default-folio3 {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-questions.hp-questions-se-folio3-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-lead .hp-lead-se-folio4-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-lead .hp-lead-default-folio4 {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-questions.hp-questions-se-folio4-only {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-yes .hp-yes-se-folio4-only {
    display: none;
  }
}

/*
  Portrait-Smartphones ohne eigene Breiten-Insel (z. B. iPhone 16/17 Pro Max ~440px; Galaxy S21–S25 Ultra ~384px):
  #funktionen, Schwarzes-Brett (Mill-Water), Footer wie iPhone 14 Pro Max — Basis liegt VOR dem SE-Block und allen schmalen Breiten-Kapseln;
  spezifischere @media-Breakpoints weiter unten überschreiben bekannte Geräte (ohne fixe CSS-Höhe).
*/
@media (max-width: 480px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  body.hp-marketing-page .hp-mill-water-sub {
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    color: var(--sl-muted) !important;
    max-width: 22rem !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  iPhone SE (375px breit, klassisch kurzes Portrait per Aspect-Band): nur noch #funktionen / Footer-Kacheln hier —
  Marketing-Hero: ausschließlich @media (max-width: 430px) + nachfolgender SE-Hero-Kapselung.
*/
@media (max-width: 375px) and (orientation: portrait) and (min-aspect-ratio: 11/20)
  and (max-aspect-ratio: 15/26) {
  /*
    Funktionen (#funktionen): Viewport links bündig; linke Motiv-Spalte schmal (mehr Copy-Breite);
    Grid-Gap gegenüber vorheriger SE-Stufe nochmals ~25 % kleiner; Papagei ~93.75 % der Linkssp. (= +25 % ggü. 75 %);
    Copy mit min-width:0 + kleinerer Typo.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: globaler ≤1020px-Block setzt 1-spaltig + riesige Rabbit-Höhe (min. ~367px);
    greift bei SE (Breite unter 480px), während der 480–900-Portrait-Fix nicht matched — hier explizit kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  /*
    Mill-Water (Schwarzes-Brett-Kachel): Overlay unten rechts auf SE unpraktisch —
    unter das Bereichsbild ziehen; volle Breite; gesamtes Panel = ein Link
    (.hp-mill-water-claim). Pill-„Button“ nur Optik (.hp-mill-water-claim-btn: pointer-events: none).
  */
  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  Hero ≤430 px (iPhone 14 Pro Max u. ä. Portrait-CSS-Breite): Folien 1–4 nach Mockups —
  Folie 1 · Tiere/Wiese · oben-links · hsl. magenta/schwarze Sub · graue Header-Tagline
  Folie 2 · Pferd/Händler/in · unteres Drittel · hsl. magenta / weiße Sub · graue Tagline
  Folie 3 · Katzen · vertikal mittig · weiß/weiß · helle graue Header-Tagline
  Folie 4 · Wald/Hund · unten-links · weiß/weiß · weiße Header-Tagline · dunkles Menu
  Raster: Primär viewport-Breite (vw + max-width gegen Rand), keine starren Pixel-Kästen/Zeilenzwang.
  Breiter (431–1024 portrait): gleicher Claim-Stack wie Zenbook/Tablet — siehe Block „Mobil‑Claim‑Stack“.
*/
@media (max-width: 430px) {
  /*
    Abstand Text/CTA zu den Hero-Punkten: gleiche Bezugsgrößen wie .hero-dots (max(7vh+safe, safe+52px)).
    Vertikale Folienlage nur über flex justify-content — keine pro-Folie padding-bottom-Patches.
  */
  body.hp-marketing-page {
    --hp-hero-mob-pad-bottom: calc(
      env(safe-area-inset-bottom, 0px) + max(7vh + 2.35rem, 5.25rem + 2.35rem)
    );
  }

  body.hp-marketing-page .site-header .brand-claim {
    font-weight: 400 !important;
    font-size: clamp(9px, 2.6vw, 11.5px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.55),
      0 0 12px rgba(0, 0, 0, 0.3) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="0"] .site-header .brand-claim,
  body.hp-marketing-page[data-hp-active-hero-slide="1"] .site-header .brand-claim {
    color: var(--sl-muted) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="2"] .site-header .brand-claim {
    color: rgba(245, 238, 242, 0.9) !important;
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.32),
      0 0 10px rgba(0, 0, 0, 0.22) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="3"] .site-header .brand-claim {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.62),
      0 0 14px rgba(0, 0, 0, 0.35) !important;
  }

  /* Folie 4 dunkles Motiv: Burger wie Mockup — hell auf dunklem Kreis */
  body.hp-marketing-page[data-hp-active-hero-slide="3"] .site-header .menu-toggle {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background:
      linear-gradient(
        155deg,
        rgba(18, 12, 22, 0.62) 0%,
        rgba(18, 12, 22, 0.42) 52%,
        rgba(18, 12, 22, 0.28) 100%
      ) !important;
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
  }

  body.hp-marketing-page .hero-copy .hp-hero-desktop-only {
    display: none !important;
  }

  body.hp-marketing-page .hero-copy .hero-copy-scrim {
    display: none !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy::before {
    content: none !important;
    display: none !important;
  }

  body.hp-marketing-page .hero-copy h1 .hp-hero-mobile-only,
  body.hp-marketing-page .hero-copy .hp-hero-mobile-subline {
    display: block !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy h1 {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    font-size: unset !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
    letter-spacing: -0.034em !important;
    text-transform: none !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(2rem, calc(1.5rem + 4.2vmin), 4.6rem) !important;
    line-height: 1.02 !important;
    font-weight: 950 !important;
  }

  body.hp-marketing-page .hero-copy .hp-hero-mobile-subline {
    margin: clamp(0.625rem, 1.2vmin + 4px, 1.125rem) 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1rem, calc(0.55rem + 2.15vmin), 1.9375rem) !important;
    line-height: 1.28 !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
    letter-spacing: -0.014em !important;
  }

  body.hp-marketing-page .hero-slide .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    min-height: 100% !important;
    height: 100% !important;
    width: 100% !important;
    max-width: min(calc(100vw - 32px), var(--sl-max)) !important;
    margin-inline: auto !important;
    padding-top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: var(--hp-hero-mob-pad-bottom) !important;
    padding-inline: max(
        env(safe-area-inset-left, 0px),
        calc((100vw - min(calc(100vw - 72px), 1100px)) / 2)
      )
      max(
        env(safe-area-inset-right, 0px),
        calc((100vw - min(calc(100vw - 72px), 1100px)) / 2)
      ) !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  body.hp-marketing-page .hero-slide .hero-actions {
    margin-top: clamp(1rem, 4vw, 1.375rem) !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.hp-marketing-page .hero-slide .hero-actions .button {
    min-height: 46px !important;
    padding: clamp(10px, 1.6vmin, 14px) clamp(1.125rem, 4vmin, 1.5rem) !important;
    font-size: clamp(14px, calc(0.35rem + 1.75vmin), 18px) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--sl-magenta) 0%, #e00083 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(176, 0, 104, 0.28) !important;
    max-width: min(100%, calc(100vw - 72px)) !important;
    box-sizing: border-box !important;
  }

  /* Folie 1 · gleicher vertikaler Anker wie Marketing‑Tablet/Zenbook‑Band (30dvh‑Formel) */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    justify-content: flex-start !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 30dvh - clamp(3rem, 2.65rem + 5.5vmin, 6rem), 16rem)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy .hp-hero-mobile-subline {
    color: #141015 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 3px rgba(255, 255, 255, 0.28) !important;
  }

  /* Folie 2 · unteres Drittel · hsl. magenta / weiße Subline */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    justify-content: flex-end !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(0, 0, 0, 0.35) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.65),
      0 0 16px rgba(0, 0, 0, 0.35) !important;
  }

  /* Folie 3 · vertikal mittig · weiß / weiß */
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-inner {
    justify-content: center !important;
    padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1 .hp-hero-mobile-brand {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(0, 0, 0, 0.4) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy .hp-hero-mobile-subline {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.62),
      0 0 16px rgba(0, 0, 0, 0.35) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(2rem, calc(1.58rem + 4.85vmin), 4.85rem) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy .hp-hero-mobile-subline {
    font-size: clamp(1.0625rem, calc(0.58rem + 2.38vmin), 1.9375rem) !important;
    margin-top: clamp(0.7rem, 1.55vmin + 4px, 1.0625rem) !important;
  }

  /* Folie 4 · unten-links · weiß / weiß */
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-inner {
    justify-content: flex-end !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy h1 .hp-hero-mobile-brand {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(0, 0, 0, 0.38) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy .hp-hero-mobile-subline {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.62),
      0 0 16px rgba(0, 0, 0, 0.35) !important;
  }
}

/*
  iPhone SE klassisch (~375×667 Portrait, Aspect-Band): sehr wenig Hero-Content — eigene kompakte Maße,
  damit Folie 1 dem SE-Mockup entspricht (oben/links, Tagline grau bei aktiver Folie 1).
*/
@media (max-width: 375px) and (orientation: portrait) and (min-aspect-ratio: 11/20)
  and (max-aspect-ratio: 15/26) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /*
    Folie 1 Claim-Zeile: etwas dichter unter dem Logo (überlagert nicht mobilen Hero-Stacks).
    Keine eigenen Folien-padding-bottom-/CTA-margin-Patches — Basis-Stack + --hp-hero-mob-pad-bottom.
  */
  body.hp-marketing-page[data-hp-active-hero-slide="0"] .site-header .brand-claim {
    color: var(--sl-muted) !important;
    font-weight: 400 !important;
    text-shadow:
      0 1px 1px rgba(255, 255, 255, 0.55),
      0 1px 2px rgba(0, 0, 0, 0.06) !important;
  }

  /* Folie 1 nur iPhone SE (Aspect-Band): dynamischen Oberabstand gegenüber Basis-Formel halbieren; Safe-Area unverändert. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(27px, 8.4vw, 36px) !important;
    line-height: 1 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy .hp-hero-mobile-subline {
    margin-top: 10px !important;
    font-size: clamp(13px, 3.85vw, 16px) !important;
    line-height: 1.22 !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy .hero-actions {
    margin-top: 14px !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-actions .button {
    min-height: 40px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(n + 2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(30px, 8.95vw, 40px) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(n + 2) .hero-copy .hp-hero-mobile-subline {
    font-size: clamp(14px, 4.05vw, 17px) !important;
  }

  /* Folie 2 · nur SE: 100px weiter unten als iPhone‑12‑Pro‑Endformel (padding-bottom −100px) */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      calc(env(safe-area-inset-bottom, 0px) + 2.75rem + 70px - 100px),
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 70px - 100px)
    ) !important;
  }

  /* Folie 2 · kompaktere Typo */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(26px, 7.25vw, 34px) !important;
    line-height: 1 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: 8px !important;
    font-size: clamp(12px, 3.25vw, 15px) !important;
    line-height: 1.22 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: 10px !important;
  }
}

/*
  Marketing-Tablet-Hochformat (Geräte-Bänder wie im Hero-Setup):
  Lead/Fragen/Kicker (.hero-copy-scrim) aus — Desktop-Claim (h1) + CTA bleiben.
  iPad Mini 761–819 · iPad Air 820–852 · Asus Zenbook Fold 853–911 · Surface Pro o. ä. 912–1023 · iPad Pro 1024×1366 (CSS 1024 breit).
*/
@media (min-width: 761px) and (max-width: 819px) and (orientation: portrait),
  (min-width: 820px) and (max-width: 852px) and (orientation: portrait),
  (min-width: 853px) and (max-width: 911px) and (orientation: portrait),
  (min-width: 912px) and (max-width: 1023px) and (orientation: portrait),
  screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-copy .hero-copy-scrim {
    display: none !important;
  }
}

/*
  iPhone XR (414×896 CSS px, Portrait): Funktionen Papagei‑Highlight wie SE; Schwarzes-Brett-Mill-Water —
  unter dem Bereichsbild (Overlay im Bild obsolet).
*/
@media (min-width: 413px) and (max-width: 415px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur iPhone XR (~414×896): Oberabstand gegenüber Basis-„Pferdeauge“-Formel halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · hp_top_bg2: keine Extra-padding-bottom — Stack weiter unten; kompaktere Typo */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(1.65rem, 8.2vw, 2.85rem) !important;
    line-height: 1.02 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: clamp(0.4rem, 1.6vw, 0.65rem) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: clamp(0.55rem, 2.2vw, 0.95rem) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 414px breiterem Viewport.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: wie iPhone SE — ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 414px unter 480px → kein 480–900-Portrait-Fix — hier kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  iPhone 12 Pro (390×844 CSS px, Portrait): Funktionen Papagei‑Highlight wie SE; Schwarzes-Brett-Mill-Water —
  unter dem Bereichsbild.
*/
@media (min-width: 389px) and (max-width: 391px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur iPhone 12 Pro (~390×844): Oberabstand gegenüber Basis-„Pferdeauge“-Formel halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · hp_top_bg2: flex-end — kein Extra-padding nach unten („+clamp“ hob den Stack falsch nach oben); näher unter Fohlmaul */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px) + 2.75rem + 70px,
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 70px)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(1.65rem, 8.2vw, 2.85rem) !important;
    line-height: 1.02 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: clamp(0.4rem, 1.6vw, 0.65rem) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: clamp(0.55rem, 2.2vw, 0.95rem) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 390px Viewportbreite.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 390px unter 480px → kein 480–900-Portrait-Fix — hier kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  iPhone 14 Pro Max (430×932 CSS px, Portrait): Funktionen Papagei‑Highlight wie SE; Schwarzes-Brett-Mill-Water —
  unter dem Bereichsbild.
*/
@media (min-width: 428px) and (max-width: 432px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur iPhone 14 Pro Max (~430×932): Oberabstand gegenüber Basis-„Pferdeauge“-Formel halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · hp_top_bg2: flex-end — kein „+clamp“; Stack weiter unten (unter Fohlmaul) */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px) + 2.75rem + 70px,
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 70px)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(1.65rem, 8.2vw, 2.85rem) !important;
    line-height: 1.02 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: clamp(0.4rem, 1.6vw, 0.65rem) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: clamp(0.55rem, 2.2vw, 0.95rem) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 430px Viewportbreite.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 430px unter 480px → kein 480–900-Portrait-Fix — hier kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  Samsung Galaxy S20 Ultra / Google Pixel 7 (412×915 CSS px, Portrait): Funktionen Papagei‑Highlight wie SE;
  Schwarzes-Brett-Mill-Water — unter dem Bereichsbild.
*/
@media (min-width: 411px) and (max-width: 413px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur Pixel 7 / S20 Ultra (~412×915): Oberabstand Basis-„Pferdeauge“ halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · hp_top_bg2: gleiche padding-bottom wie iPhone 12 Pro (Endstand); Pixel 7 / S20 Ultra (Breitenkapsel) */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px) + 2.75rem + 70px,
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 70px)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(1.65rem, 8.2vw, 2.85rem) !important;
    line-height: 1.02 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: clamp(0.4rem, 1.6vw, 0.65rem) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: clamp(0.55rem, 2.2vw, 0.95rem) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 412px Viewportbreite.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 412px unter 480px → kein 480–900-Portrait-Fix — Pixel 7 / S20 Ultra kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  Samsung Galaxy A51/A71 (412×914 CSS px, Portrait): Funktionen Papagei‑Highlight wie SE;
  Schwarzes-Brett-Mill-Water — unter dem Bereichsbild.
*/
@media (min-width: 411px) and (max-width: 413px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur Galaxy A51/A71 (~412×914): Oberabstand Basis-„Pferdeauge“ halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · hp_top_bg2: gleiche padding-bottom wie iPhone 12 Pro (Endstand); Kapsel deckt A51/A71 */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px) + 2.75rem + 70px,
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 70px)
    ) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 412px Viewportbreite.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 412px unter 480px → kein 480–900-Portrait-Fix — Galaxy A51/A71 kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  Samsung Galaxy S8+ (360×740 CSS px, Portrait): Funktionen Papagei‑Highlight wie SE;
  Schwarzes-Brett-Mill-Water — unter dem Bereichsbild.
*/
@media (min-width: 359px) and (max-width: 361px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur Galaxy S8+ (~360×740): Oberabstand Basis-„Pferdeauge“ halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · gleiche Formel wie iPhone 12 Pro, für S8+ −20px (Stack weiter unten) */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px) + 2.75rem + 50px,
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 50px)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(1.65rem, 8.2vw, 2.85rem) !important;
    line-height: 1.02 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: clamp(0.4rem, 1.6vw, 0.65rem) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: clamp(0.55rem, 2.2vw, 0.95rem) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 360px Viewportbreite.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 360px unter 480px → kein 480–900-Portrait-Fix — Galaxy S8+ kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  Samsung Galaxy Z Fold 5 (344×882 CSS px, Portrait, äußeres Display): Funktionen Papagei‑Highlight wie SE;
  Schwarzes-Brett-Mill-Water — unter dem Bereichsbild.
*/
@media (min-width: 343px) and (max-width: 345px) and (orientation: portrait) {
  /* Alle Hero-Claims: +15px nach rechts */
  body.hp-marketing-page .hero-slide .hero-inner {
    padding-left: calc(15px + max(0px, env(safe-area-inset-left, 0px))) !important;
  }

  /* Folie 1 nur Galaxy Z Fold 5 Außen (~344×882): Oberabstand Basis-„Pferdeauge“ halbieren; Safe-Area voll. */
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 32dvh - clamp(3rem, 2.5rem + 6.5vw, 5.875rem), 14rem) / 2
    ) !important;
  }

  /* Folie 2 · hp_top_bg2: gleiche padding-bottom wie iPhone 12 Pro (Endstand) */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px) + 2.75rem + 70px,
      calc(var(--hp-hero-mob-pad-bottom) - 3.75rem + 70px)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(1.65rem, 8.2vw, 2.85rem) !important;
    line-height: 1.02 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    margin-top: clamp(0.4rem, 1.6vw, 0.65rem) !important;
    font-size: clamp(0.8rem, 3.45vw, 1.15rem) !important;
    line-height: 1.24 !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hero-actions {
    margin-top: clamp(0.55rem, 2.2vw, 0.95rem) !important;
  }

  /*
    Funktionen (#funktionen): Papagei/Igel‑Highlight wie iPhone SE 375×667 —
    gleiche Formeln (%, vw‑clamp); skaliert auf 344px Viewportbreite.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: clamp(3px, 0.75vw, 5px) !important;
    align-items: start !important;
    align-content: start !important;
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: start !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    width: 93.75% !important;
    max-width: 93.75% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(13px, 4.25vw, 17px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0.03em !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 8px !important;
    font-size: clamp(10px, 3.35vw, 13px) !important;
    line-height: 1.42 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /*
    Angebotskarte + Hase: ≤1020px-Block stackt mit riesiger Rabbit-Höhe;
    Breite 344px unter 480px → kein 480–900-Portrait-Fix — Z Fold 5 Außen kapseln.
  */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: clamp(6px, 2vw, 12px) !important;
    padding: clamp(12px, 3.2vw, 18px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(4px, 1.5vw, 10px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(132px, 35vw) !important;
    max-height: min(220px, 32vh) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }

  /* Footer: vier Link-Bereiche als 2×2-Kacheln; Logo-Zeile (.footer-col-brand) darunter weiter volle Breite */
  html:not(.is-flutter-app) body.hp-marketing-page .footer-grid,
  body.hp-marketing-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(10px, 2.5vw, 18px) !important;
    row-gap: clamp(12px, 2.5vw, 20px) !important;
  }
}

/*
  ASUS Zenbook Fold OLED (~853×1280 Portrait): Papagei links; Copy-Blöcke als Kachel im Rasterfeld,
  „ALLES AN…“-Block um ~40 % des Freiraums zum Papagei nach links (translateX), Raster-Gap minimal.
*/
@media (min-width: 851px) and (max-width: 855px) and (orientation: portrait) {
  /*
    Highlight: minimales column-gap; geschätzter Freiraum Papagei→Copy ×0,4 = translateX auf `.funktionen-highlight-copy`.
  */
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    align-content: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    align-self: flex-start !important;
    width: min(100%, calc(46.875% * 1.5625)) !important;
    max-width: min(100%, calc(46.875% * 1.5625)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: translateX(clamp(-40px, calc(-0.30 * 8vw), -14px)) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    place-self: center !important;
    text-align: left !important;
    transform: translateX(calc(-0.4 * clamp(96px, 18vw, 172px))) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(38px, 5vw, 62px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: 14px !important;
    margin-top: 22px !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 12px !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;
    color: rgba(36, 19, 29, 0.86) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: clamp(38px, 5vw, 62px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker {
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;
    color: rgba(36, 19, 29, 0.86) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label {
    font-size: 17px !important;
    line-height: 1.7 !important;
    margin-top: 22px !important;
    color: rgba(36, 19, 29, 0.74) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-box,
  body.hp-marketing-page .funktionen-offer-code-box {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: 17px !important;
    line-height: 1.7 !important;
    margin-top: 18px !important;
    color: rgba(36, 19, 29, 0.74) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    align-items: stretch !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    place-self: center !important;
    text-align: left !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(calc(123px * 1.75 * 1.5), calc(16.5vw * 1.75 * 1.5)) !important;
    max-height: clamp(
      calc(97px * 1.75 * 1.5),
      calc(18.375vw * 1.75 * 1.5),
      calc(185px * 1.75 * 1.5)
    ) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
    transform: none !important;
  }

  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    pointer-events: none !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 10px !important;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    margin-top: 6px !important;
    font-size: 16px !important;
    line-height: 1.14 !important;
  }
}

/*
  iPad Air (~820×1180) und iPad Mini (~768×1024), Portrait: #funktionen Papagei/Igel & Hase —
  gleiche Raster-/Copy-/Typo-/Bildlogik wie ASUS Zenbook Fold OLED (853×1280).
*/
@media
  (width: 820px) and (height: 1180px) and (orientation: portrait),
  (width: 768px) and (height: 1024px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .funktionen-split,
  body.hp-marketing-page #funktionen .funktionen-split {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    align-content: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    position: relative !important;
    left: 0 !important;
    align-self: flex-start !important;
    width: min(100%, calc(46.875% * 1.5625)) !important;
    max-width: min(100%, calc(46.875% * 1.5625)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: translateX(clamp(-40px, calc(-0.30 * 8vw), -14px)) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    place-self: center !important;
    text-align: left !important;
    transform: translateX(calc(-0.4 * clamp(96px, 18vw, 172px))) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(38px, 5vw, 62px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: 14px !important;
    margin-top: 22px !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    gap: 12px !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;
    color: rgba(36, 19, 29, 0.86) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: clamp(38px, 5vw, 62px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker {
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;
    color: rgba(36, 19, 29, 0.86) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label {
    font-size: 17px !important;
    line-height: 1.7 !important;
    margin-top: 22px !important;
    color: rgba(36, 19, 29, 0.74) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-box,
  body.hp-marketing-page .funktionen-offer-code-box {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: 17px !important;
    line-height: 1.7 !important;
    margin-top: 18px !important;
    color: rgba(36, 19, 29, 0.74) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    align-items: stretch !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-height: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    place-self: center !important;
    text-align: left !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(calc(123px * 1.75 * 1.5), calc(16.5vw * 1.75 * 1.5)) !important;
    max-height: clamp(
      calc(97px * 1.75 * 1.5),
      calc(18.375vw * 1.75 * 1.5),
      calc(185px * 1.75 * 1.5)
    ) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/*
  Tablet/Marketing Hochformat: viele Regeln galten nur ab 761px — verschobenes Chrome-Fenster
  bleibt aber oft bei 720–758px hängen und wirkte dann wie Mobil. Untergrenze 431px (Handy &lt;431 = iPhone‑Band).
  Querformat: (min-width: 1021px) bzw. (orientation: landscape) → basic.
*/
@media (min-width: 431px) and (max-width: 1024px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page {
    overflow-x: hidden;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .site-shell {
    width: 100%;
    max-width: 1024px;
    margin-inline: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  html:not(.is-flutter-app) .nav-wrap,
  html:not(.is-flutter-app) .section-inner,
  html:not(.is-flutter-app) .footer-inner {
    width: min(100% - 32px, var(--sl-max));
  }

  html:not(.is-flutter-app) .site-header .nav-wrap {
    width: min(100% - 72px, 1100px);
  }

  html:not(.is-flutter-app) .hero-slide .hero-inner {
    width: min(100% - 72px, 1100px);
    height: 100%;
    min-height: 560px;
  }

  /* Gleiche horizontale Außenkante wie Hero/Header (über body.hp-marketing-page: je 25px) */
  html:not(.is-flutter-app) section.community .section-inner.community-inner,
  html:not(.is-flutter-app) #community-cta .section-inner,
  html:not(.is-flutter-app) .footer-inner {
    width: min(100% - 72px, 1100px);
  }

  /* Tierheim: linker/rechter Textriegel = Community (gleiche Formel wie Hero-Innenbreite) */
  html:not(.is-flutter-app) .shelter-copy {
    padding-left: max(16px, calc((100vw - min(100vw - 72px, 1100px)) / 2));
    padding-right: max(16px, calc((100vw - min(100vw - 72px, 1100px)) / 2));
  }

  /* Gutschein „1 Monat …“: linke Kante wie Tierheim-Fließtext */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane {
    padding-left: max(16px, calc((100vw - min(100vw - 50px, 1100px)) / 2));
  }

  /* Nach allen html:not-Breiten: Marketing HP immer 25px je Seite; auch mit html.is-flutter-app. */
  body.hp-marketing-page .nav-wrap,
  body.hp-marketing-page .section-inner,
  body.hp-marketing-page .footer-inner {
    width: min(100% - 50px, var(--sl-max));
  }

  body.hp-marketing-page .site-header .nav-wrap {
    width: min(100% - 50px, 1100px);
  }

  body.hp-marketing-page .hero-slide .hero-inner {
    width: min(100% - 50px, 1100px);
    height: 100%;
    min-height: 560px;
  }

  body.hp-marketing-page section.community .section-inner.community-inner,
  body.hp-marketing-page #community-cta .section-inner,
  body.hp-marketing-page .footer-inner {
    width: min(100% - 50px, 1100px);
  }

  body.hp-marketing-page .shelter-copy {
    padding-left: max(16px, calc((100vw - min(100vw - 50px, 1100px)) / 2));
    padding-right: max(16px, calc((100vw - min(100vw - 50px, 1100px)) / 2));
  }

  body.hp-marketing-page .funktionen-offer-pane {
    padding-left: max(16px, calc((100vw - min(100vw - 50px, 1100px)) / 2));
  }

  html:not(.is-flutter-app) .nav-links {
    position: fixed;
    top: var(--sl-header-height);
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--sl-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--sl-shadow);
    padding: 18px;
  }

  html:not(.is-flutter-app) .site-header.menu-open .nav-links {
    display: flex;
  }

  html:not(.is-flutter-app) .site-header.is-compact .nav-links {
    top: var(--sl-header-compact-height);
  }

  html:not(.is-flutter-app) .mobile-login {
    display: block;
    padding: 0;
  }

  html:not(.is-flutter-app) .menu-toggle {
    display: inline-flex;
  }

  /* Trust: Nicht-Marketing weiter 4 Spalten (kompakt). */
  html:not(.is-flutter-app) body:not(.hp-marketing-page) .trust-strip .section-inner {
    width: min(100% - 32px, var(--sl-max));
  }

  html:not(.is-flutter-app) body:not(.hp-marketing-page) .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(10px, 1.6vw, 20px);
    row-gap: 0;
  }

  html:not(.is-flutter-app) body:not(.hp-marketing-page) .trust-item {
    padding: 10px 4px;
    min-height: 0;
    gap: 7px;
    align-items: start;
  }

  html:not(.is-flutter-app) body:not(.hp-marketing-page) .trust-item h2,
  html:not(.is-flutter-app) body:not(.hp-marketing-page) .trust-item h3 {
    font-size: 11.5px;
    letter-spacing: -0.035em;
    line-height: 1.2;
  }

  html:not(.is-flutter-app) body:not(.hp-marketing-page) .trust-item p {
    font-size: 10.5px;
    line-height: 1.34;
    margin-top: 3px;
  }

  /* Kein volles-Viewport-Minimum: sonst riesiger Abstand vor „Vorteile“, wenn TikTok leer ist. */
  html:not(.is-flutter-app) .feature-section {
    min-height: 0;
    align-items: flex-start;
  }

  html:not(.is-flutter-app) .feature-section.section {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  html:not(.is-flutter-app) .hp-mill-water-stack {
    margin-top: 0;
  }

  html:not(.is-flutter-app) .schwarzes-brett-mill {
    margin-top: 0;
    padding-top: 0;
  }

  /* Volle Breite: schmalere .section-inner-Regel aus diesem Media-Block hier überschreiben. */
  html:not(.is-flutter-app) .schwarzes-brett-mill .section-inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  html:not(.is-flutter-app) .hp-mill-water-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  html:not(.is-flutter-app) .hp-mill-water-cta img {
    width: 100vw;
    max-width: 100vw;
  }

  /* Funktionen: zwei Fließkarten nebeneinander (Papagei+Igel | Angebot+Hase); Feintuning im Block 761–1024px unten */
  html:not(.is-flutter-app) .funktionen-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html:not(.is-flutter-app) .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(10px, 1.6vw, 20px);
    row-gap: clamp(14px, 2.2vw, 22px);
  }

  html:not(.is-flutter-app) .site-header.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
  }

  .hero-slide .hero-mobile-content-overlay,
  .hero-slide.is-active .hero-mobile-content-overlay,
  .hero-slide.is-active.hero-iphone-revealed .hero-mobile-content-overlay,
  .hero-slide.is-active:not(:first-child) .hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .hero {
    /* Dynamic/kleine Viewport-Höhe — verhindert Abschneiden unten (Punkt-Navi) */
    height: min(100dvh, 100svh);
    min-height: unset;
    max-height: min(100dvh, 100svh);
  }

  .hero-slide .hero-bg img {
    object-fit: cover;
    /* Linker Textblock ~48vw: gleiche horizontale Kante wie bisher; vertikal Bild oben andocken */
    object-position: 38% top;
  }

  .phone-hitbox,
  .hero-chrome .phone-hitbox {
    display: none;
  }

  .hero-copy {
    position: absolute;
    left: 0;
    isolation: isolate;
    top: calc(var(--sl-header-height) + clamp(4px, 1vh, 14px));
    /* Schmaler auf 768px, etwas breiter bis 1024px für Zeilenlänge */
    width: min(100%, max(280px, min(48vw + 12px, 480px)));
    max-width: calc(100vw - min(52vw, 480px) - 12px);
    padding-right: clamp(8px, 2vw, 16px);
    box-sizing: border-box;
    word-wrap: break-word;
  }

  .hero-slide:nth-child(4) .hero-copy {
    width: min(100%, max(300px, min(54vw + 14px, 600px)));
    max-width: calc(100vw - min(40vw, 380px) - 16px);
  }

  .hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: -12px;
    bottom: -16px;
    left: -36px;
    right: -12px;
    background: radial-gradient(
      ellipse 118% 130% at -2% 42%,
      rgba(255, 253, 251, 0.94) 0%,
      rgba(255, 253, 251, 0.58) 35%,
      rgba(255, 253, 251, 0.2) 62%,
      rgba(255, 253, 251, 0) 88%
    );
    /* Rechts weich ausblenden wie bisher; oben/unten dieselbe weiche Kante (Masken multiplizieren). */
    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        #000 52%,
        rgba(0, 0, 0, 0.45) 72%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.28) 5%,
        rgba(0, 0, 0, 0.65) 12%,
        #000 22%,
        #000 78%,
        rgba(0, 0, 0, 0.65) 88%,
        rgba(0, 0, 0, 0.28) 95%,
        transparent 100%
      );
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        #000 52%,
        rgba(0, 0, 0, 0.45) 72%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.28) 5%,
        rgba(0, 0, 0, 0.65) 12%,
        #000 22%,
        #000 78%,
        rgba(0, 0, 0, 0.65) 88%,
        rgba(0, 0, 0, 0.28) 95%,
        transparent 100%
      );
    mask-composite: intersect;
    mask-mode: alpha;
  }

  /* Typo: bei ~768vmin wirkt wie zuvor (~44px H1); darüber wächst es bis max. */
  .hero h1 {
    font-size: clamp(26px, calc(0.45rem + 4.78vmin), 58px);
    line-height: 1.06;
    letter-spacing: -0.034em;
    text-shadow:
      0 1px 0 rgba(255, 253, 251, 0.82),
      0 0 20px rgba(255, 252, 250, 0.5);
  }

  .hero-lead {
    margin-top: clamp(10px, 1.75vmin, 22px);
    font-size: clamp(14px, calc(0.32rem + 2.05vmin), 25px);
    line-height: 1.52;
    text-shadow: 0 1px 1px rgba(255, 253, 251, 0.92);
  }

  .hero-questions {
    margin-top: clamp(10px, 1.75vmin, 22px);
    font-size: clamp(13px, calc(0.28rem + 1.88vmin), 22px);
    line-height: 1.52;
    text-shadow: 0 1px 1px rgba(255, 253, 251, 0.92);
  }

  .hero-no,
  .hero-yes {
    margin-top: clamp(10px, 1.55vmin, 20px);
    font-size: clamp(13px, calc(0.28rem + 1.88vmin), 23px);
    text-shadow: 0 1px 1px rgba(255, 253, 251, 0.92);
  }

  .hero-no span,
  .hero-yes span {
    font-size: clamp(22px, calc(0.4rem + 4.05vmin), 42px);
  }

  .hero-actions {
    margin-top: clamp(12px, 2vmin, 26px);
  }

  .hero-actions .button {
    max-width: 100%;
    padding: clamp(12px, 2.2vmin, 18px) clamp(16px, 2.8vw, 28px);
    font-size: clamp(14px, calc(0.26rem + 1.72vmin), 20px);
  }

  .hero-chrome .love-badge,
  .love-badge {
    right: clamp(10px, 2.2vw, 24px);
    bottom: calc(
      env(safe-area-inset-bottom, 0px) + clamp(104px, 15vh, 148px)
    );
    width: clamp(100px, 17vmin, 132px);
  }
}

/*
  Marketing-HP #trust (#trust-strip): Kacheln (2×2, 14px/12px) nur unter 1024px Breite.
  Ab width ≥1024px: kein Kachel-/Karten-Stil — Grundlayout vier Spalten (.trust-grid) wie Desktop.
*/
@media (max-width: 1023px) {
  /* Trust unter Hero: 25px wie Basis-.trust-strip (nur <1024px; Desktop/Nest/iPad Pro Portrait separat ohne Padding). */

  html:not(.is-flutter-app) body.hp-marketing-page .trust-strip .section-inner {
    width: min(100% - 50px, 1640px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(8px, 2.5vw, 20px);
    row-gap: clamp(8px, 2.5vw, 20px);
    overflow: visible;
    padding: clamp(4px, 1vw, 10px) 0;
    box-sizing: border-box;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-item {
    width: auto;
    max-width: none;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 2.5vw, 14px);
    align-items: start;
    padding: clamp(12px, 3.2vw, 22px) clamp(10px, 2.4vw, 24px);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-item h2,
  html:not(.is-flutter-app) body.hp-marketing-page .trust-item h3 {
    font-size: 14px;
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-item p {
    font-size: 12px;
    line-height: 1.48;
    margin-top: 7px;
  }
}

/*
  Marketing-HP #trust nur: Globales „≤1024 + portrait → .trust-grid 2 Spalten“ (Zeile ~2816)
  trifft noch iPad Pro Portrait (1024×1366). Hier explizit vier Spalten + Desktop-Strip, nicht Kacheln.
*/
@media (min-width: 1024px) {
  html:not(.is-flutter-app) body.hp-marketing-page .trust-strip .section-inner {
    width: min(100% - 50px, 1640px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-item {
    width: auto;
    max-width: none;
    min-height: 104px;
    gap: 14px;
    align-items: start;
    padding: 24px 26px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-item h2,
  html:not(.is-flutter-app) body.hp-marketing-page .trust-item h3 {
    font-size: 15px;
    font-weight: 950;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .trust-item p {
    font-size: 13px;
    line-height: 1.48;
    margin-top: 7px;
  }
}

/*
  Tablet-Portrait Basis-top (wie Desktop-Anker): 700–911 und genau 1024px Breite Portrait.
  912–1023 nicht hier — eigener gekapselter Surface-Pro-7-Block (sonst Cascade-Kollision).
*/
@media (min-width: 700px) and (max-width: 911px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide .hero-copy {
    top: max(
      calc(var(--sl-header-height) + clamp(8px, 1.5vh, 18px)),
      calc(24.2% - 50px)
    );
  }
}

@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide .hero-copy {
    top: max(
      calc(var(--sl-header-height) + clamp(8px, 1.5vh, 18px)),
      calc(24.2% - 50px)
    );
  }

  /*
    iPad Pro (~1024×1366, exakt 1024 CSS px Portrait): Punkt-Navi in der Hero-Chrome (absolute),
    20px-Dots (nur in dieser @media, nicht mit anderen Tablet-Blöcken gemischt).
  */
  body.hp-marketing-page #heroDots.hero-dots,
  body.hp-marketing-page #hero .hero-dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    margin-bottom: 0;
    z-index: 8;
    gap: 28px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    justify-content: center;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot,
  body.hp-marketing-page #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot.is-active,
  body.hp-marketing-page #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }
}

/*
  iPad Pro (~1024×1366, Portrait): Trust unter Hero — kein vertikales Padding (Basis 25px hier zurücknehmen).
  Aspect-Band statt fixer Höhe (Viewport-/Safari-Abweichungen).
*/
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait)
  and (min-aspect-ratio: 1024/1375) and (max-aspect-ratio: 1024/1358) {
  .trust-strip,
  html:not(.is-flutter-app) body.hp-marketing-page .trust-strip {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/*
  Surface Pro 7 (912–1023 CSS px, Portrait ~912×1368): gekapselt — hp-br-tport-912 + .hero-copy + CTA.
  Text: Basis wie Tablet, dann −125px (Stand: +25px runter gegenüber −150px).
*/
@media (min-width: 912px) and (max-width: 1023px) and (orientation: portrait) {
  body.hp-marketing-page .hero-lead br.hp-br-tport-912,
  body.hp-marketing-page .hero-questions br.hp-br-tport-912,
  body.hp-marketing-page .hero-yes br.hp-br-tport-912,
  body.hp-marketing-page .hero-no br.hp-br-tport-912 {
    display: revert;
  }

  body.hp-marketing-page .hero-slide .hero-copy {
    bottom: 0;
    top: calc(
      max(
        calc(var(--sl-header-height) + clamp(8px, 1.5vh, 18px)),
        calc(24.2% - 50px)
      ) - 125px
    );
  }

  /* CTA „Jetzt kostenlos starten“: 150px über dem Folienunterrand (alle Slides) */
  body.hp-marketing-page .hero-slide .hero-actions {
    position: absolute;
    bottom: 150px;
    left: 0;
    margin-top: 0;
  }

  /* Punkt-Navi: Hero-Chrome (absolute), 50px Boden, 20px-Dots */
  body.hp-marketing-page #heroDots.hero-dots,
  body.hp-marketing-page #hero .hero-dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    margin-bottom: 0;
    z-index: 8;
    gap: 28px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    justify-content: center;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot,
  body.hp-marketing-page #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot.is-active,
  body.hp-marketing-page #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }

  /* #funktionen: Claim nur SP912; Papagei −100px; Hase +60px / +100px */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title .funktionen-features-title-sp912,
  body.hp-marketing-page .funktionen-features-title .funktionen-features-title-sp912 {
    display: inline;
    text-transform: none;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title .funktionen-features-title-sp912-tail,
  body.hp-marketing-page .funktionen-features-title .funktionen-features-title-sp912-tail {
    white-space: nowrap;
  }

  html:not(.is-flutter-app)
    body.hp-marketing-page
    .funktionen-features-title
    .funktionen-features-title-sp912
    .funktionen-features-title-accent,
  body.hp-marketing-page
    .funktionen-features-title
    .funktionen-features-title-sp912
    .funktionen-features-title-accent {
    text-transform: uppercase;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title .funktionen-features-title-default,
  body.hp-marketing-page .funktionen-features-title .funktionen-features-title-default {
    display: none !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    transform: translateY(-100px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    transform: translate(60px, 100px);
  }
}

/*
  Marketing: Mobil‑Claim‑Stack wie Tablet/Zenbook‑Fold‑Band (431–1024 px Portrait, 761–1024 px sowie Hochformat
  bis 1440 px, damit schmale Desktop‑Fenster nicht im absoluten Desktop‑Hero hängen bleiben).
  Kein alter Desktop‑h1 („Wenn es drauf …“), kein .hero-copy-scrim / kein ::before‑Lesefeld.
  Überschreibt gekapselte Tablet‑Hero‑Anchors (700–911, 1024, 912–1023) durch Flusslayout + Flex (.hero-inner).
*/
@media (min-width: 431px) and (max-width: 1024px) and (orientation: portrait),
  (min-width: 761px) and (max-width: 1024px),
  screen and (min-width: 1025px) and (max-width: 1440px) and (max-aspect-ratio: 1/1) {
  body.hp-marketing-page {
    --hp-hero-mob-pad-bottom: calc(
      env(safe-area-inset-bottom, 0px) + max(7vh + 2.35rem, 5.25rem + 2.35rem)
    );
  }

  body.hp-marketing-page section#hero.hero,
  body.hp-marketing-page #hero.hero {
    height: min(100dvh, 100svh);
    min-height: min(100dvh, 100svh);
    max-height: none;
  }

  body.hp-marketing-page .site-header .brand-claim {
    font-weight: 400 !important;
    font-size: clamp(10.5px, 2.05vmin, 14px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.55),
      0 0 12px rgba(0, 0, 0, 0.3) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="0"] .site-header .brand-claim,
  body.hp-marketing-page[data-hp-active-hero-slide="1"] .site-header .brand-claim {
    color: var(--sl-muted) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="2"] .site-header .brand-claim {
    color: rgba(245, 238, 242, 0.9) !important;
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.32),
      0 0 10px rgba(0, 0, 0, 0.22) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="3"] .site-header .brand-claim {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.62),
      0 0 14px rgba(0, 0, 0, 0.35) !important;
  }

  body.hp-marketing-page[data-hp-active-hero-slide="3"] .site-header .menu-toggle {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background:
      linear-gradient(
        155deg,
        rgba(18, 12, 22, 0.62) 0%,
        rgba(18, 12, 22, 0.42) 52%,
        rgba(18, 12, 22, 0.28) 100%
      ) !important;
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy .hp-hero-desktop-only {
    display: none !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy .hero-copy-scrim {
    display: none !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy::before {
    content: none !important;
    display: none !important;
    background: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    mask: none !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy h1 .hp-hero-mobile-only,
  body.hp-marketing-page .hero-slide .hero-copy .hp-hero-mobile-subline {
    display: block !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: min(100%, calc(100vw - 50px - env(safe-area-inset-right, 0px))) !important;
    max-width: min(640px, 92vw - env(safe-area-inset-right, 0px)) !important;
    padding-right: 0 !important;
    isolation: auto;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy {
    max-width: min(680px, 94vw - env(safe-area-inset-right, 0px)) !important;
  }

  body.hp-marketing-page .hero-slide .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    min-height: min(100dvh, 100svh) !important;
    height: 100% !important;
    width: 100% !important;
    padding-top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: var(--hp-hero-mob-pad-bottom) !important;
    padding-inline: max(
        env(safe-area-inset-left, 0px),
        calc((100vw - min(calc(100vw - 72px), 1100px)) / 2)
      )
      max(
        env(safe-area-inset-right, 0px),
        calc((100vw - min(calc(100vw - 72px), 1100px)) / 2)
      ) !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy h1 {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: unset !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
    letter-spacing: -0.034em !important;
    text-transform: none !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(2rem, calc(1.5rem + 4.2vmin), 4.6rem) !important;
    line-height: 1.02 !important;
    font-weight: 950 !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy .hp-hero-mobile-subline {
    margin: clamp(0.625rem, 1.2vmin + 4px, 1.125rem) 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1rem, calc(0.55rem + 2.15vmin), 1.9375rem) !important;
    line-height: 1.28 !important;
    font-weight: 400 !important;
    font-synthesis: none !important;
    letter-spacing: -0.014em !important;
  }

  body.hp-marketing-page .hero-slide .hero-actions {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: clamp(1rem, 1.6vmin + 8px, 1.75rem) !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.hp-marketing-page .hero-slide .hero-actions .button {
    min-height: 46px !important;
    padding: clamp(10px, 1.6vmin, 14px) clamp(1.125rem, 4vmin, 1.5rem) !important;
    font-size: clamp(14px, calc(0.35rem + 1.75vmin), 18px) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--sl-magenta) 0%, #e00083 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(176, 0, 104, 0.28) !important;
    max-width: min(100%, calc(100vw - 72px)) !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    justify-content: flex-start !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 30dvh - clamp(3rem, 2.65rem + 5.5vmin, 6rem), 16rem)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy .hp-hero-mobile-subline {
    color: #141015 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 3px rgba(255, 255, 255, 0.28) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner {
    justify-content: flex-end !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(0, 0, 0, 0.35) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.65),
      0 0 16px rgba(0, 0, 0, 0.35) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-inner {
    justify-content: center !important;
    padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1 .hp-hero-mobile-brand {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(0, 0, 0, 0.4) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy .hp-hero-mobile-subline {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.62),
      0 0 16px rgba(0, 0, 0, 0.35) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(2rem, calc(1.58rem + 4.85vmin), 4.85rem) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy .hp-hero-mobile-subline {
    font-size: clamp(1.0625rem, calc(0.58rem + 2.38vmin), 1.9375rem) !important;
    margin-top: clamp(0.7rem, 1.55vmin + 4px, 1.0625rem) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-inner {
    justify-content: flex-end !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy h1 .hp-hero-mobile-brand {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(0, 0, 0, 0.38) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy .hp-hero-mobile-subline {
    color: #fff !important;
    text-shadow:
      0 1px 4px rgba(0, 0, 0, 0.62),
      0 0 16px rgba(0, 0, 0, 0.35) !important;
  }
}

/*
  Nest Hub-Klasse (flaches Landscape, z. B. ~1024×600): Folien 2–4 — Claim-Block wie Folie 1
  (flex-start + identisches padding-top; Markenfarbe/Subline/Schlagschatten wie nth-child(1); Folie 3 Schriftgrade zurück zur Folie‑1‑Basis; Folie 4 max‑width wie Standard‑Claim).
*/
@media (max-width: 1024px) and (orientation: landscape) and (min-width: 901px) and (max-height: 680px) {
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-inner {
    justify-content: flex-start !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(5.5rem, 30dvh - clamp(3rem, 2.65rem + 5.5vmin, 6rem), 16rem)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1 .hp-hero-mobile-brand,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy .hp-hero-mobile-subline,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy .hp-hero-mobile-subline {
    color: #141015 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 3px rgba(255, 255, 255, 0.28) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy h1 .hp-hero-mobile-brand {
    font-size: clamp(2rem, calc(1.5rem + 4.2vmin), 4.6rem) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-copy .hp-hero-mobile-subline {
    font-size: clamp(1rem, calc(0.55rem + 2.15vmin), 1.9375rem) !important;
    margin-top: clamp(0.625rem, 1.2vmin + 4px, 1.125rem) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hero-copy {
    max-width: min(640px, 92vw - env(safe-area-inset-right, 0px)) !important;
  }
}

/*
  Tablet-Portrait 761–1024 (iPad Mini/Air/Pro, Zenbook Fold, Surface Pro 7, ggf. Pro/iPad-Breiten):
  Folie 1‑Claim wie Mockup — vertikaler Anker ~24.2 dvh (Desktop .hero-copy top), Lesekarte weiß;
  horizontale Einrückung bereits deckungsgleich .nav-wrap über padding-inline im Marketing-761–1024‑Block.
*/
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner {
    justify-content: flex-start !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(3.75rem, calc(24.2dvh - 2rem), 14rem)
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy {
    width: auto !important;
    max-width: min(520px, calc(100% - 8px)) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    border-radius: clamp(14px, 2.2vmin, 22px) !important;
    padding: clamp(14px, 2vmin + 6px, 24px) clamp(18px, 3vmin + 8px, 30px) !important;
    box-shadow:
      0 16px 42px rgba(18, 12, 22, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    box-sizing: border-box !important;
  }
}

/*
  ASUS Zenbook Fold Portrait (~853×1280, 853–911 px CSS): Folie 1 — weiße Claim-Karte aus;
  gesamten Claim‑Block 50 px höher (padding-top −50px gegenüber Portrait‑Tablet‑Anker).
  Folie 2 gleiche Position wie Folie 1 + gleiche Claim‑Farben/Schlagschatten wie Folie 1.
  Folien 3/4 nur dieselbe `.hero-inner`‑Position wie Folie 1; Farben wie Marketing‑Basis.
*/
@media (min-width: 853px) and (max-width: 911px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-inner {
    justify-content: flex-start !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(3.75rem, calc(24.2dvh - 2rem), 14rem)
        - 50px
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy {
    width: auto !important;
    max-width: min(640px, 92vw - env(safe-area-inset-right, 0px)) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    color: #141015 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 3px rgba(255, 255, 255, 0.28) !important;
  }

  /* Frühere Zenbook-Regel (.hero-copy `bottom`, CTA `absolute`): für Marketing‑Flex zurücksetzen. */
  body.hp-marketing-page .hero-slide .hero-copy {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
  }

  body.hp-marketing-page .hero-slide .hero-actions {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: clamp(1rem, 1.6vmin + 8px, 1.75rem) !important;
  }
}

/*
  Surface Duo (~540×720, Portrait): Hero …; Mill-Water-Claim kompakt.
  #funktionen: Claims Faktor 0,81 (zwei Mal −10 %); Highlight wie zuvor; Offer‑Copy 50 px Einzug links.
*/
@media (min-width: 532px) and (max-width: 548px) and (orientation: portrait)
  and (min-aspect-ratio: 532/728) and (max-aspect-ratio: 548/712) {
  body.hp-marketing-page .hero-slide .hero-copy {
    top: calc(var(--sl-header-height) + clamp(4px, 1vh, 14px) - 20px);
    bottom: 0;
  }

  /* Folie 1‑Claim: weiße Lesekarte wie Tablet‑Mockup (ohne zusätzliche left‑Korrektur — bestehendes Anchor‑Layout). */
  body.hp-marketing-page .hero-slide:first-child .hero-copy {
    padding-left: clamp(14px, 2.5vmin, 22px);
    padding-right: clamp(14px, 2.5vmin, 22px);
    padding-top: clamp(12px, 2vmin, 18px);
    padding-bottom: clamp(12px, 2vmin, 18px);
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    border-radius: clamp(13px, 2vmin, 20px) !important;
    box-shadow:
      0 16px 42px rgba(18, 12, 22, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    box-sizing: border-box !important;
  }

  /* Folie 1 .hero-lead: u. a. „Dein Haustier“ / „liegt beim“ / „Tierarzt. Es“ / „geht plötzlich“ / „um Sekunden.“ — nur <br class="hp-br-surface-duo-lead"> */
  body.hp-marketing-page .hero-slide:first-child .hero-lead br:not(.hp-br-surface-duo-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead br.hp-br-surface-duo-lead {
    display: revert;
  }

  /* Folie 2 .hero-lead: „in denen jedem“ / „Tierarzt … die Daten“ / „fehlen.“ — nur <br class="hp-br-surface-duo-lead"> */
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-lead br:not(.hp-br-surface-duo-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-lead br.hp-br-surface-duo-lead {
    display: revert;
  }

  /* Folie 3, 3. Frage: „Unklare Vorgeschichte“ / „👉 …“ — nur <br class="hp-br-surface-duo-lead"> */
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-questions p:nth-of-type(3) br:not(.hp-br-surface-duo-lead) {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hero-questions p:nth-of-type(3) br.hp-br-surface-duo-lead {
    display: revert;
  }

  /* Folie 3 .hero-lead: u. a. „irgendwo im Handy -“ / „im Kopf.“ — zusätzliche <br class="hp-br-surface-duo-lead"> */
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-lead br.hp-br-surface-duo-lead {
    display: revert;
  }

  /* CTA „Jetzt kostenlos starten“: 75px über dem Folienunterrand (alle Slides) */
  body.hp-marketing-page .hero-slide .hero-actions {
    position: absolute;
    bottom: 75px;
    left: 0;
    margin-top: 0;
  }

  body.hp-marketing-page #heroDots.hero-dots,
  body.hp-marketing-page #hero .hero-dots {
    position: absolute;
    left: auto;
    right: 0;
    transform: none;
    margin-right: 25px;
    justify-content: flex-end;
    bottom: calc(25px + env(safe-area-inset-bottom, 0px) - 20px);
    z-index: 8;
    gap: 28px;
    max-width: none;
    box-sizing: border-box;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot,
  body.hp-marketing-page #hero .hero-dots .hero-dot {
    width: 20px;
    height: 20px;
  }

  body.hp-marketing-page #heroDots.hero-dots .hero-dot.is-active,
  body.hp-marketing-page #hero .hero-dots .hero-dot.is-active {
    transform: scale(1.2);
  }

  body.hp-marketing-page .hp-mill-water-claim {
    --hp-mill-inset: 10px;
    max-width: min(220px, calc(100vw - 22px));
    padding: 7px 9px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(36, 19, 29, 0.14);
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.1;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    font-size: 9px;
    font-weight: 700;
    min-height: 26px;
    padding: 3px 8px;
    margin-top: 6px;
    border-radius: 999px;
  }

  /* --- #funktionen (nur Duo): Claims zusätzlich −10 % (Faktor 0,81 ggü. Tierheim‑Clamp); Offer‑Copy 50 px Einzug links --- */
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    column-gap: clamp(5px, 1.25vw, 9px) !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    width: fit-content !important;
    max-width: 100% !important;
    place-self: center !important;
    text-align: left !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(calc(38px * 0.81), calc(5vw * 0.81), calc(62px * 0.81)) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    font-size: calc(17px * 0.81) !important;
    line-height: 1.7 !important;
    font-weight: 800 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: clamp(calc(38px * 0.81), calc(5vw * 0.81), calc(62px * 0.81)) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    padding-left: 0 !important;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    margin-left: 50px !important;
    max-width: calc(100% - 50px) !important;
    box-sizing: border-box !important;
  }
}

/*
  Surface Duo + iPad Mini/Air/Pro + Surface Pro 7: Hero‑Claim 1:1 wie ASUS Zenbook Fold
  (853–911 Portrait ist der native Zenbook‑Block hier; Bands wie Marketing‑Tablet‑Setup:
  Mini 761–819 · Air 820–852 · SP7 912–1023 · Pro 1024×1366).
*/
@media (min-width: 532px) and (max-width: 548px) and (orientation: portrait)
  and (min-aspect-ratio: 532/728) and (max-aspect-ratio: 548/712),
  (min-width: 761px) and (max-width: 819px) and (orientation: portrait),
  (min-width: 820px) and (max-width: 852px) and (orientation: portrait),
  (min-width: 912px) and (max-width: 1023px) and (orientation: portrait),
  screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page .hero-slide:nth-child(1) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(3) .hero-inner,
  body.hp-marketing-page .hero-slide:nth-child(4) .hero-inner {
    justify-content: flex-start !important;
    padding-top: calc(
      env(safe-area-inset-top, 0px)
        + clamp(3.75rem, calc(24.2dvh - 2rem), 14rem)
        - 50px
    ) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(1) .hero-copy {
    width: auto !important;
    max-width: min(640px, 92vw - env(safe-area-inset-right, 0px)) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1,
  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy h1 .hp-hero-mobile-brand {
    color: var(--sl-magenta) !important;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.45),
      0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-copy .hp-hero-mobile-subline {
    color: #141015 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 3px rgba(255, 255, 255, 0.28) !important;
  }

  body.hp-marketing-page .hero-slide .hero-copy {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
  }

  body.hp-marketing-page .hero-slide .hero-actions {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: clamp(1rem, 1.6vmin + 8px, 1.75rem) !important;
  }
}

/*
  Nest Hub Max: 1280 CSS px breit, Landscape 16∶10 — Mill-Water-Claim (ganze Kachel) 100px nach unten.
  Aspect statt fixer Höhe (Chrome/UI-Schätzungen).
  Funktionen: .funktionen-offer-copy hat sonst overflow-y:auto (Desktop-Band 65vh) — hier entsteht
  unten eine graue Scrollbar-Kante unter dem Fließtext; ohne Overflow dieselbe Darstellung wie breiter Desktop.
*/
@media (min-width: 1280px) and (max-width: 1280px) and (orientation: landscape)
  and (min-aspect-ratio: 8/5) and (max-aspect-ratio: 8/5) {
  .trust-strip,
  html:not(.is-flutter-app) body.hp-marketing-page .trust-strip {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    top: 50%;
    transform: translateY(calc(-50% + clamp(115px, 11.07vh, 180px) + 100px));
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead .hp-lead-nest-hub-max-folio1-only {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-lead .hp-lead-default {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-questions .hp-folio1-q1-nest-hub-max-only {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-questions .hp-folio1-q1-default {
    display: none;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-questions .hp-folio1-q3-nest-hub-max-only {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:first-child .hero-questions .hp-folio1-q3-default {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hp-questions-default-folio4 .hp-folio4-mehr-sicherheit-nest-hub-max-only {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:nth-child(4) .hp-questions-default-folio4 .hp-folio4-mehr-sicherheit-default {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hp-questions-default-folio3 .hp-folio3-q2-nest-hub-max-only,
  body.hp-marketing-page .hero-slide:nth-child(3) .hp-questions-default-folio3 .hp-folio3-q3-nest-hub-max-only {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:nth-child(3) .hp-questions-default-folio3 .hp-folio3-q2-default,
  body.hp-marketing-page .hero-slide:nth-child(3) .hp-questions-default-folio3 .hp-folio3-q3-default {
    display: none;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-questions .hp-folio2-q1-nest-hub-max-only {
    display: inline;
  }

  body.hp-marketing-page .hero-slide:nth-child(2) .hero-questions .hp-folio2-q1-default {
    display: none;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    overflow-y: visible !important;
    overflow: visible !important;
  }
}

/*
  Nest Hub: 1024×600-Klasse (Landscape 128∶75). Mill-Water-Kachel — wie bisher.
  Funktionen (Papagei/Igel | Angebot/Hase): gleiche Logik wie Desktop / Nest Hub Max (50vw|50vw, 65vh‑Band,
  Typo/Hasen‑Skalierung via vw/vh); highlight‑ und offer‑Copy ohne vertikalen Scroll (graue Mittellinie/Scrollbar vermeiden).
  #funktionen: unteres Section‑Padding wie `.section` oben (98px), Global‑Override `.functions { padding-bottom: 0 }` hier aufgehoben.
*/
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: landscape)
  and (min-aspect-ratio: 128/75) and (max-aspect-ratio: 128/75) {
  .trust-strip,
  html:not(.is-flutter-app) body.hp-marketing-page .trust-strip {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.hp-marketing-page .hp-mill-water-claim {
    top: 50%;
    right: 50px;
    transform: translateY(calc(-50% + clamp(115px, 11.07vh, 180px) + 50px));
    max-width: min(278px, 34vw);
    padding: 10px 14px;
    border-radius: 13px;
    box-shadow: 0 10px 26px rgba(36, 19, 29, 0.15);
  }

  body.hp-marketing-page .hp-mill-water-kicker {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  body.hp-marketing-page .hp-mill-water-lead {
    font-size: 18px;
    margin-top: 5px;
    line-height: 1.1;
  }

  body.hp-marketing-page .hp-mill-water-claim .hp-mill-water-claim-btn {
    font-size: 14px;
    font-weight: 700;
    min-height: 30px;
    padding: 5px 12px;
    margin-top: 6px;
    border-radius: 999px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .hp-mill-water-stack .functions,
  body.hp-marketing-page .hp-mill-water-stack .functions {
    padding-bottom: 98px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-split,
  body.hp-marketing-page .funktionen-split {
    grid-template-columns: 50vw 50vw;
    width: 100%;
    border-radius: 0;
    height: 65vh;
    min-height: 65vh;
    max-height: 65vh;
    overflow: hidden;
    align-items: stretch;
    margin-top: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(130px, min(calc(31% + 2px), 272px)) minmax(0, 1fr);
    align-items: start;
    height: 100%;
    min-height: 0;
    padding-top: clamp(10px, 1.4vh, 16px);
    padding-bottom: clamp(10px, 1.4vh, 16px);
    padding-right: clamp(10px, 1.5vw, 18px);
    padding-left: 0;
    min-width: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 0;
    max-height: 100%;
    padding-top: 10px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    max-height: min(56vh, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left top;
    margin-left: 0;
    transform: translateY(-50px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: visible !important;
    overflow: visible !important;
    padding-top: 25px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: calc(clamp(21.6px, 2.835vw, 35.1px) - 2px);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0.04em;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list,
  body.hp-marketing-page .funktionen-features-list {
    gap: 14px;
    margin-top: 22px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    font-size: calc(17px - 2px);
    line-height: 1.7;
    font-weight: 800;
    color: rgba(36, 19, 29, 0.86);
    gap: 12px;
    align-items: center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li::before,
  body.hp-marketing-page .funktionen-features-list li::before {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    font-size: calc(12px - 2px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    height: 100%;
    min-height: 0;
    gap: clamp(4px, 0.6vw, 10px);
    padding:
      clamp(10px, 1.4vh, 16px)
      clamp(8px, 1vw, 14px)
      clamp(10px, 1.4vh, 16px)
      clamp(8px, 1vw, 14px);
    min-width: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-copy,
  body.hp-marketing-page .funktionen-offer-copy {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: visible !important;
    overflow: visible !important;
    padding-top: 60px;
    padding-right: clamp(2px, 0.6vw, 8px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-heading-block,
  body.hp-marketing-page .funktionen-offer-heading-block {
    gap: clamp(6px, 1vw, 12px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: calc(clamp(21.6px, 2.835vw, 35.1px) - 2px);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0.04em;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-line2,
  body.hp-marketing-page .funktionen-offer-title-line2 {
    white-space: normal;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-gift svg,
  body.hp-marketing-page .funktionen-offer-gift svg {
    width: 26px;
    height: 26px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker {
    font-size: calc(17px - 2px);
    line-height: 1.65;
    font-weight: 800;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label {
    font-size: calc(17px - 2px);
    margin-top: 22px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-box,
  body.hp-marketing-page .funktionen-offer-code-box {
    font-size: calc(clamp(16px, 1.35vw, 20px) - 2px);
    padding: clamp(8px, 1vw, 11px) clamp(14px, 1.8vw, 18px);
    min-width: clamp(140px, 18vw, 200px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-rule,
  body.hp-marketing-page .funktionen-offer-rule {
    margin-top: 18px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: calc(17px - 2px);
    line-height: 1.7;
    margin-top: 18px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    margin-right: 0;
    padding: clamp(4px, 0.8vh, 10px) 0;
    padding-left: 0;
    align-self: end;
    max-height: 100%;
    justify-content: flex-end;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(calc(738px * 0.9), min(calc(45vw * 0.9), 90%));
    max-height: min(calc(58vh * 0.9), calc(1080px * 0.9));
    width: auto;
    height: auto;
    transform: translate(clamp(-6px, -1.2vw, -20px), 75px);
    object-position: 85% 100%;
  }
}

@media (max-width: 1020px), screen and (max-width: 1024px) and (orientation: portrait) {
  body.hp-marketing-page:not(.is-flutter-app) .site-header.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
  }
}

body.hp-marketing-page:not(.is-flutter-app) .site-header.menu-open .nav-wrap {
  position: relative;
  z-index: 1;
}

body.hp-marketing-page:not(.is-flutter-app) .site-header.menu-open .nav-links {
  z-index: 2;
}

/*
  Tablet-Breite (480–1024px): nur Außenlayout / Mill-Überlapp — ohne Portrait-Layout-Kniffe,
  damit Querformat-Desktop nicht mit translateY / 100px-Gap zerschossen wird.
*/
@media (min-width: 480px) and (max-width: 1024px) {
  html:not(.is-flutter-app) body.hp-marketing-page #funktionen .section-inner,
  body.hp-marketing-page #funktionen .section-inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-split,
  body.hp-marketing-page .funktionen-split {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: -50px;
    position: relative;
    z-index: 1;
    overflow-x: visible;
    overflow-y: visible;
    box-sizing: border-box;
  }
}

/* Nur Hochformat: frühere Tablet-Funktionen (Gap, Bildausrichtung). Nicht auf Desktop-Quer anwenden. */
@media (min-width: 431px) and (max-width: 1024px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(18px, 5vw, 72px);
    row-gap: 0;
    align-items: center;
    align-content: center;
    padding-left: env(safe-area-inset-left, 0px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    min-width: 0;
    padding-left: 0;
    margin-left: 0;
    transform: none;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    justify-content: flex-start;
    align-items: center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    display: block;
    margin: 0;
    width: auto;
    max-width: min(220px, 31.5vw);
    height: auto;
    max-height: min(326px, 39vh);
    object-fit: contain;
    object-position: left center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 2.2vw, 28px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    justify-content: flex-end;
    align-self: center;
    min-height: 0;
    padding: clamp(12px, 2vw, 22px);
    padding-left: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(246px, 33vw);
    max-height: clamp(195px, 36.75vw, 370px);
    object-position: 100% 100%;
  }
}

/* Schmales Fenster min. Breite ~720px, oft Querformat: gleiches Overlay-Verhalten */
@media (max-width: 760px) and (min-width: 480px) and (min-height: 520px) and (orientation: landscape) {
  .hero-slide .hero-mobile-content-overlay,
  .hero-slide.is-active .hero-mobile-content-overlay,
  .hero-slide.is-active.hero-iphone-revealed .hero-mobile-content-overlay,
  .hero-slide.is-active:not(:first-child) .hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* iPad Mini o. ä.: kompaktere Typo; 431px unten = gleicher Grund wie Haupt-Tablet-Block */
@media (min-width: 431px) and (max-width: 1024px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    column-gap: clamp(14px, 2.8vw, 40px);
    align-items: center;
    align-content: center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    transform: none;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    max-width: min(171px, 23.25vw);
    max-height: min(270px, 31.5vh);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(20px, 3.15vw, 36px);
    letter-spacing: 0.035em;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    font-size: clamp(12.5px, 1.65vw, 15.5px);
    line-height: 1.45;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: clamp(18px, 2.85vw, 28px);
    line-height: 1.1;
    letter-spacing: 0.04em;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-gift svg,
  body.hp-marketing-page .funktionen-offer-gift svg {
    width: 26px;
    height: 26px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker {
    font-size: clamp(10px, 1.22vw, 12.5px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label {
    font-size: clamp(11px, 1.45vw, 13.5px);
    margin-top: clamp(12px, 2vw, 18px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-box,
  body.hp-marketing-page .funktionen-offer-code-box {
    font-size: clamp(13px, 1.95vw, 19px);
    padding: clamp(7px, 1vw, 10px) clamp(12px, 1.7vw, 17px);
    min-width: clamp(148px, 24vw, 190px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: clamp(11px, 1.42vw, 13.5px);
    line-height: 1.42;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(158px, 21vw);
    max-height: clamp(141px, 24vw, 240px);
  }
}

/* Surface Pro 7 Portrait: Claim 1px kleiner als Tablet-Portrait-Clamp (Block darüber überschreibt sonst). */
@media (min-width: 912px) and (max-width: 1023px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: calc(clamp(20px, 3.15vw, 36px) - 1px);
  }
}

/*
  iPad Pro (1024 CSS px breit, Portrait ~1024×1366): #funktionen — Papagei/Hase wie Surface Pro 7
  verschoben; Bildmaße etwas über Tablet-Kompakt für die breitere 1024px-Ansicht.
  Claim „ALLES AN EINEM ORT“: 2px kleiner als Tablet-Portrait-Clamp.
  Aspect-Band statt fixer Höhe.
*/
@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait)
  and (min-aspect-ratio: 1024/1375) and (max-aspect-ratio: 1024/1358) {
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: calc(clamp(20px, 3.15vw, 36px) - 2px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    display: block;
    margin: 0;
    width: auto;
    max-width: min(198px, 19.35vw);
    height: auto;
    max-height: min(304px, 32vh);
    object-fit: contain;
    object-position: left center;
    transform: translateY(-100px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(182px, 17.8vw);
    max-height: clamp(158px, 22vw, 268px);
    object-position: 100% 100%;
    transform: translate(60px, 100px);
  }
}

/*
  Enges Fenster nur Hochformat: sonst greifen die Kompakt-Fonts im Desktop-Quer mit.
  — Karten untereinander; pro Kante nur Bild | Text bzw. Text | Hase.
  — translateY auf Copy entfernen (lag über Tierbildern).
  — Tierbilder: Höhe an Zeilen-Inhalt (stretch + max-height:100%).
  — Footer: Überschriften 16px, Fließ/Links 12px.
*/
@media (min-width: 480px) and (max-width: 900px) and (orientation: portrait) {
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-split,
  body.hp-marketing-page .funktionen-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight,
  body.hp-marketing-page .funktionen-highlight {
    grid-template-columns: minmax(54px, min(28.5%, 150px)) minmax(0, 1fr);
    column-gap: clamp(10px, 2.5vw, 18px);
    align-items: stretch;
    align-content: stretch;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-copy,
  body.hp-marketing-page .funktionen-highlight-copy {
    transform: none;
    align-self: stretch;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual,
  body.hp-marketing-page .funktionen-highlight-visual {
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-highlight-visual img,
  body.hp-marketing-page .funktionen-highlight-visual img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-title,
  body.hp-marketing-page .funktionen-features-title {
    font-size: clamp(12px, 2.8vw, 16px);
    line-height: 1.12;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-features-list li,
  body.hp-marketing-page .funktionen-features-list li {
    font-size: 12px;
    line-height: 1.45;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane,
  body.hp-marketing-page .funktionen-offer-pane {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(8px, 2vw, 16px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
    min-width: 0;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img,
  body.hp-marketing-page .funktionen-offer-pane .funktionen-rabbit img {
    max-width: min(180px, 34.5vw);
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: right center;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-title-main,
  body.hp-marketing-page .funktionen-offer-title-main {
    font-size: clamp(12px, 2.9vw, 16px);
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-kicker,
  body.hp-marketing-page .funktionen-offer-kicker,
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-label,
  body.hp-marketing-page .funktionen-offer-code-label,
  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-foot,
  body.hp-marketing-page .funktionen-offer-foot {
    font-size: 12px;
  }

  html:not(.is-flutter-app) body.hp-marketing-page .funktionen-offer-code-box,
  body.hp-marketing-page .funktionen-offer-code-box {
    font-size: clamp(12px, 2.6vw, 14px);
  }

  body.hp-marketing-page .footer-title,
  .site-footer .footer-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  body.hp-marketing-page .footer-col:not(.footer-col-brand) a,
  body.hp-marketing-page .footer-disabled,
  body.hp-marketing-page .footer-col:not(.footer-col-brand) button,
  body.hp-marketing-page .footer-col p,
  body.hp-marketing-page .footer-bottom {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* Schmale Viewports: Footer-Spalten — gleiche optische Stufe wie Fließtext-Zeilen */
@media (max-width: 900px) {
  html:not(.is-flutter-app) body.hp-marketing-page .site-footer .footer-title,
  body.hp-marketing-page .site-footer .footer-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
  }
}

/*
 * Hero-iPhone-Mockup: Pflicht-Ausblendung für Handys + Tablet-Hochformat.
 * Hohe Spezifität + zuletzt im Stylesheet (i. d. R. nach iPhone SE / iOS Safari ok).
 */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 760px) {
  body.hp-marketing-page .hero-slides > .hero-slide > img.hero-mobile-content-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/*
 * Smartphone quer: relativ niedrige Höhe typisch Phone-Landscape, max. Breite untenhalb großer Tablets.
 * Über Marketing und Flutter-Web (homepage.js setzt aria-hidden passend zur Media Query).
 */
.hp-portrait-only-blocking {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  padding: calc(24px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  z-index: 2147483645;
  pointer-events: none;
}

.hp-portrait-only-blocking-scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 19, 29, 0.88);
  backdrop-filter: blur(8px);
}

.hp-portrait-only-blocking-card {
  position: relative;
  box-sizing: border-box;
  max-width: min(380px, 100%);
  margin: auto;
  padding: 28px 24px;
  border-radius: 22px;
  background: linear-gradient(
    155deg,
    rgba(255, 253, 251, 0.98),
    rgba(255, 244, 234, 0.97)
  );
  box-shadow: 0 24px 72px rgba(36, 19, 29, 0.35);
  pointer-events: auto;
}

.hp-portrait-only-blocking-text {
  margin: 0;
  font-size: clamp(16px, 4.2vmin, 19px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #24131d;
  text-align: center;
  font-weight: 700;
}

@media screen and (orientation: landscape) and (max-height: 540px) and (max-width: 932px) {
  .hp-portrait-only-blocking {
    display: flex;
    pointer-events: auto;
  }
}

/*
  Schwarzes Brett — Mill-Water: bis einschl. 1024px keine Kachel über dem Bild;
  Klick/Info-Block unter dem Bild, zentriert. Desktop (≥1025px): unverändert Overlay.
  Liegt am Dateiende, überschreibt gerätespezifische .hp-mill-water-claim-Overrides.
*/
@media (max-width: 1024px) {
  .hp-mill-water-hero,
  body.hp-marketing-page .hp-mill-water-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hp-mill-water-cta,
  body.hp-marketing-page .hp-mill-water-cta {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  .hp-mill-water-claim,
  body.hp-marketing-page .hp-mill-water-claim {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: stretch !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  .hp-mill-water-kicker,
  .hp-mill-water-lead,
  .hp-mill-water-sub,
  body.hp-marketing-page .hp-mill-water-kicker,
  body.hp-marketing-page .hp-mill-water-lead,
  body.hp-marketing-page .hp-mill-water-sub {
    text-align: center !important;
  }

  body.hp-marketing-page .hp-mill-water-sub {
    max-width: 28rem !important;
  }
}