/* ============================================================================
   Suite-Bento Section — Welle 5.12 Clean Rebuild
   ----------------------------------------------------------------------------
   Sauberer From-Scratch-Rebuild des Suite-Section-Layouts. Ersetzt das
   Welle-5.7-5.10-Erbe aus hero-v3.css mit klarer Mobile-First-Architektur.

   ARCHITEKTUR:
   - Grid: 1col mobile → 2col tablet → 3col desktop (Hero spans 2)
   - Tile: flex column (header → body → footer), kein bleed, kein overflow-hack
   - Hero-Tile Desktop: content top + visual bottom (in-flow stacking)
   - Block-Tiles: brand + lede + mini + footer (alle in flow)

   LAYER-STRATEGIE:
   - Diese Datei in @layer base (FRÜHER als hero-legacy)
   - Author-Cascade: !important in früherem Layer WINS bei !important
   - Damit gewinnen unsere Layout-Regeln gegen hero-v3.css !important
   - Internal-Animations (anim-browser, bento-mini, brand-echo, trade-map,
     anim-pill-N etc) bleiben in hero-v3.css unangetastet
   ============================================================================ */
@layer base {

/* ── Tokens (Section-lokal, übersteuerbar) ────────────────────────────── */
/* Welle 5.14b: kompakter (vorher: pad-y 3.5-6rem, tile-pad 1.25-1.75rem) */
.suite-bento {
  --st-section-pad-y: clamp(2.25rem, 4.5vw, 4rem);
  --st-container-max: 1280px;
  --st-grid-gap: clamp(0.6rem, 1.1vw, 1rem);
  --st-tile-radius: 18px;
  --st-tile-pad: clamp(1rem, 1.7vw, 1.4rem);
  --st-tile-bg: #ffffff;
  --st-tile-border: 1px solid rgba(15, 23, 42, 0.08);
  --st-tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(15, 23, 42, 0.04);

  padding-block: var(--st-section-pad-y);
  position: relative;
}

body.is-dark-bg .suite-bento {
  --st-tile-bg: rgba(28, 35, 48, 0.72);
  --st-tile-border: 1px solid rgba(255, 255, 255, 0.08);
  --st-tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 1px 2px rgba(0, 0, 0, 0.20);
}

/* ── Grid Layout (Mobile-First) ───────────────────────────────────────── */
.suite-bento-stripe {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--st-grid-gap) !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Tablet: 2-Spalten, Hero spans both */
@media (min-width: 768px) {
  .suite-bento-stripe {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .suite-bento-stripe > .bento-tile--hero {
    grid-column: 1 / -1 !important;
  }
}

/* Desktop: 3-Spalten, Hero spans 2 Spalten + 2 Rows */
@media (min-width: 1024px) {
  .suite-bento-stripe {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: minmax(280px, auto) !important;
  }
  .suite-bento-stripe > .bento-tile--hero {
    grid-column: 1 / span 2 !important;
    grid-row: 1 / span 2 !important;
  }
}

/* ── Tile-Base (Shared für alle Tiles) ────────────────────────────────── */
.suite-bento-stripe > .bento-tile {
  position: relative !important;
  background: var(--st-tile-bg) !important;
  border: var(--st-tile-border) !important;
  border-radius: var(--st-tile-radius) !important;
  box-shadow: var(--st-tile-shadow) !important;
  padding: 0 !important;  /* Wird intern via Content gesetzt */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  isolation: isolate;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none;
  clip-path: none !important;
  transition:
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 320ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 200ms ease-out;
}

@media (hover: hover) {
  .suite-bento-stripe > .bento-tile:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 12px 32px rgba(15, 23, 42, 0.08);
  }
}

/* ── Tile-Content (innerer Container, padding + flex) ─────────────────── */
/* Welle 5.14b: kompakter gap (vorher 0.875-1.25rem) */
.suite-bento-stripe > .bento-tile > .bento-tile-content {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.65rem, 1.1vw, 0.95rem) !important;
  padding: var(--st-tile-pad) !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  inset: auto !important;
}

/* ── Hero-Tile: Visual (Browser-Mockup) ───────────────────────────────── */
.suite-bento-stripe > .bento-tile--hero > .bento-tile-visual {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  z-index: 1;
  order: 2;  /* Visual unter Content auf Mobile/Tablet */
  padding: clamp(1rem, 2vw, 1.5rem);
  padding-top: 0;
}

.suite-bento-stripe > .bento-tile--hero > .bento-tile-content {
  order: 1;  /* Content vor Visual */
}

@media (min-width: 1024px) {
  /* Desktop: Hero hat 2x2 grid-slot, mehr Platz → Visual größer */
  .suite-bento-stripe > .bento-tile--hero > .bento-tile-visual {
    min-height: 320px;
    padding: clamp(1.25rem, 2vw, 2rem);
    padding-top: 0;
  }
}

/* Suite-anim-web Container (im Visual) */
.suite-bento-stripe > .bento-tile--hero .suite-anim-web {
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

/* Browser-Mockup */
.suite-bento-stripe > .bento-tile--hero .anim-browser {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: #f5f5f7 !important;
  overflow: hidden !important;
  margin: 0 !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  transform: none !important;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.06),
    0 24px 64px rgba(15, 23, 42, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
}

body.is-dark-bg .suite-bento-stripe > .bento-tile--hero .anim-browser {
  background: #1a2030 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Browser-Content (Site-Bilder) */
.suite-bento-stripe > .bento-tile--hero .anim-browser-content {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

/* PageSpeed-Badge: Re-position innerhalb visual area, top-right */
.suite-bento-stripe > .bento-tile--hero > .web-tile-badge {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 5;
  inset: 1rem 1rem auto auto !important;
}

@media (min-width: 1024px) {
  .suite-bento-stripe > .bento-tile--hero > .web-tile-badge {
    top: 1.25rem !important;
    right: 1.5rem !important;
    inset: 1.25rem 1.5rem auto auto !important;
  }
}

/* ── Hero-Tile-Content: Header + Industry-Strip + Footer-Row ──────────── */
.suite-bento-stripe > .bento-tile--hero .bento-tile-hero-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(0.75rem, 1.5vw, 1.25rem) !important;
  flex-shrink: 0 !important;
}

.suite-bento-stripe > .bento-tile--hero .bento-tile-logo-prominent {
  flex-shrink: 0 !important;
  width: clamp(48px, 6vw, 72px) !important;
  height: auto !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

.suite-bento-stripe > .bento-tile--hero .bento-tile-text-stack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.suite-bento-stripe > .bento-tile--hero .bento-tile-name {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

.suite-bento-stripe > .bento-tile--hero .bento-tile-lede {
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.72);
  margin: 0;
  max-width: 60ch;
}

body.is-dark-bg .suite-bento-stripe > .bento-tile--hero .bento-tile-lede {
  color: rgba(255, 255, 255, 0.78);
}

/* Industry-Strip im Content (kompakte Pill-Reihe) */
.suite-bento-stripe > .bento-tile--hero .anim-industry-strip--inline {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.suite-bento-stripe > .bento-tile--hero .anim-industry-strip--inline .anim-industry-label {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(15, 23, 42, 0.5) !important;
  flex-shrink: 0;
}

.suite-bento-stripe > .bento-tile--hero .anim-industry-strip--inline .anim-industry-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer-Row: CTA links + Stat rechts */
.suite-bento-stripe > .bento-tile--hero .bento-tile-footer-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* ── Block-Stack-Tiles: Brand-Header + Lede + Mini + Footer ───────────── */
.suite-bento-stripe > .bento-tile--block-stack > .bento-tile-content {
  gap: clamp(0.75rem, 1.2vw, 1.1rem) !important;
}

.suite-bento-stripe > .bento-tile--block-stack .bento-tile-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.suite-bento-stripe > .bento-tile--block-stack .bento-tile-brand-logo {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  margin: 0 !important;
}

.suite-bento-stripe > .bento-tile--block-stack .bento-tile-brand-text {
  flex: 1 1 auto;
  min-width: 0;
}

.suite-bento-stripe > .bento-tile--block-stack .bento-tile-name {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.15;
}

.suite-bento-stripe > .bento-tile--block-stack .bento-tile-lede {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.7);
  margin: 0;
}

body.is-dark-bg .suite-bento-stripe > .bento-tile--block-stack .bento-tile-lede {
  color: rgba(255, 255, 255, 0.75);
}

/* Bento-Mini Container: Visualisierungen (brand-echo, trade-map, agenda, etc) */
.suite-bento-stripe > .bento-tile--block-stack .bento-mini {
  position: relative !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 140px !important;
  border-radius: 12px;
  overflow: hidden !important;
  margin: 0 !important;
  inset: auto !important;
}

/* Tile-Footer (Stat + CTA) */
.suite-bento-stripe > .bento-tile--block-stack .bento-tile-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Floating-Badge auf Block-Tiles (z.B. "11yrs Brand Depth") */
.suite-bento-stripe > .bento-tile > .tile-floating-badge {
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  z-index: 4;
  inset: 0.85rem 0.85rem auto auto !important;
}

/* ── Stat + CTA (shared) ──────────────────────────────────────────────── */
.suite-bento-stripe > .bento-tile .bento-tile-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.suite-bento-stripe > .bento-tile .bento-tile-stat-num-row {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.suite-bento-stripe > .bento-tile .bento-tile-stat-num {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(15, 23, 42, 0.9);
  line-height: 1;
}

body.is-dark-bg .suite-bento-stripe > .bento-tile .bento-tile-stat-num {
  color: rgba(255, 255, 255, 0.92);
}

.suite-bento-stripe > .bento-tile .bento-tile-stat-num-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
}

.suite-bento-stripe > .bento-tile .bento-tile-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
}

body.is-dark-bg .suite-bento-stripe > .bento-tile .bento-tile-stat-label {
  color: rgba(255, 255, 255, 0.55);
}

.suite-bento-stripe > .bento-tile .bento-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tile-accent, #2d4a8a);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.suite-bento-stripe > .bento-tile .bento-tile-cta:hover {
  gap: 0.6rem;
}

.suite-bento-stripe > .bento-tile .bento-tile-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* ── Section-Header (Eyebrow + Title) ─────────────────────────────────── */
/* Welle 5.14b: kompakter (vorher: margin-bottom 2-3rem) */
.suite-bento-header {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.suite-bento-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0.4rem 0 0;
}

/* ============================================================================
   WELLE 5.14 — Banner-Hero ÜBER Bento (Plan §5.7.125)
   ----------------------------------------------------------------------------
   Stripe/Apple/Vercel-Pattern: Hauptprodukt (Web) als volle-Breite-Banner
   in eigener Section ÜBER dem 5-Tile-Bento. Löst Asymmetric-Bento-Stretch-
   Problem bei mittleren Breakpoints (1024px) — Hero wird nicht mehr durch
   Marketing+Consulting-Höhe gestretched.

   Layout:
   - Banner volle Breite: Web-Hero
   - Stripe Row 1 (Desktop, 3 Tiles span 2 in 6-col): Marketing, Consulting, Bookmi
   - Stripe Row 2 (Desktop, 2 Tiles span 3): Yummi, Shopmi (50/50 split)
   ============================================================================ */

.suite-bento-banner {
  width: 100%;
  margin-bottom: var(--st-grid-gap, 16px);
}

.suite-bento-banner > .bento-tile--hero {
  position: relative;
  background: var(--st-tile-bg);
  border: var(--st-tile-border);
  border-radius: var(--st-tile-radius);
  box-shadow: var(--st-tile-shadow);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  transition:
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* PageSpeed-Badge floating top-right (nicht als Grid-Cell zählen) */
.suite-bento-banner > .bento-tile--hero > .web-tile-badge {
  position: absolute !important;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  pointer-events: none;
}
.suite-bento-banner > .bento-tile--hero > .web-tile-badge > * {
  pointer-events: auto;
}

/* Mobile (Base): Content oben, Visual drunter (flex-column default) */
.suite-bento-banner > .bento-tile--hero > .bento-tile-content {
  padding: clamp(1.25rem, 4vw, 1.75rem);
  order: 1;
}
.suite-bento-banner > .bento-tile--hero > .bento-tile-visual {
  padding: clamp(0.75rem, 3vw, 1.25rem);
  padding-top: 0;
  order: 2;
}

/* Tablet+: Content links, Visual rechts (side-by-side, kein bleed) */
@media (min-width: 768px) {
  .suite-bento-banner > .bento-tile--hero {
    display: grid !important;
    flex-direction: row !important;  /* override falls flex woanders gesetzt */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
    align-items: stretch;
  }
  /* Welle 5.14b: kompakter Banner-Padding (vorher 1.75-2.5 / 1.25-2rem) */
  .suite-bento-banner > .bento-tile--hero > .bento-tile-content {
    padding: clamp(1.25rem, 2.4vw, 2rem);
    max-width: none;
    height: auto;
    justify-content: center;
  }
  .suite-bento-banner > .bento-tile--hero > .bento-tile-visual {
    padding: clamp(0.9rem, 1.8vw, 1.5rem);
    display: flex;
    align-items: center;
  }
  .suite-bento-banner > .bento-tile--hero .anim-browser {
    transform: none;          /* kein 3D-Tilt mehr nötig (kein bleed-out) */
    margin: 0;
    width: 100%;
  }
  /* PageSpeed-Badge: relativ zum Banner-Tile */
  .suite-bento-banner > .bento-tile--hero > .web-tile-badge {
    top: 1.25rem;
    right: 1.25rem;
  }
}

/* Desktop: feste komfortable Höhe, kein Stretch von Nachbarn mehr */
/* Welle 5.14b: kompakter (vorher 2.25rem 2.75rem) */
@media (min-width: 1024px) {
  .suite-bento-banner > .bento-tile--hero > .bento-tile-content {
    padding: 1.75rem 2.25rem;
  }
  .suite-bento-banner > .bento-tile--hero > .web-tile-badge {
    top: 1.25rem;
    right: 1.5rem;
  }
}

/* ============================================================================
   WELLE 5.14c — Section-Kompaktheit (Recherche-basiert)
   ----------------------------------------------------------------------------
   Tile-Visual max-heights begrenzen damit Section-Höhe vom Plan-Target
   (1500-1700px Desktop) erreicht wird statt aktuell 1864px.

   Quellen-basiert (SaaSFrame 2026, Landdding, TMO Group Thai-Markt):
   - Thai-Markt: Visual-Dominanz, picture-heavy → Banner bleibt prominent
   - Bento-Best-Practice: max 200px per Mini-Visual für Scannability
   - "Tile macht zu viel" wenn Visual zu groß ist → kompakter wirkt premium
   ============================================================================ */

/* Service-Tile-Minis (Marketing-Echo, Consulting-Map): kompakter */
.bento-mini--echo,
.bento-mini--map {
  max-height: 200px !important;
  overflow: hidden !important;
}

/* App-Tile-Minis (Bookmi-Agenda, Yummi-Orders, Shopmi-Cart): kompakter */
.bento-mini--agenda,
.bento-mini--orders,
.bento-mini--cart {
  max-height: 150px !important;
  overflow: hidden !important;
}

/* Banner-Hero Browser-Mockup: 21:9 statt 16:10 → mehr Breite, weniger Höhe.
   Wichtig: Thai-Markt liebt visuelle Wirkung — Browser bleibt prominent
   im Wide-Format. */
@media (min-width: 768px) {
  .suite-bento-banner > .bento-tile--hero .anim-browser {
    aspect-ratio: 21 / 10 !important;
  }
}

@media (hover: hover) {
  .suite-bento-banner > .bento-tile--hero:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 12px 32px rgba(15, 23, 42, 0.08);
  }
}

/* ----------------------------------------------------------------------------
   Stripe Override: kein Hero mehr drin → simples symmetrisches 5-Tile-Grid.
   Die alten `.suite-bento-stripe > .bento-tile--hero` Regeln (Z.67-76 oben)
   greifen automatisch nicht mehr, weil Hero jetzt im `.suite-bento-banner`
   lebt. Wir definieren hier neue Spaltenzählung für 5 Tiles.
   ---------------------------------------------------------------------------- */

/* Tablet only (768-1023): 2-col, Row 3 hat das 5te Tile (Shopmi) als full-width Banner */
@media (min-width: 768px) and (max-width: 1023px) {
  .suite-bento-stripe > .bento-tile:nth-child(5):last-child {
    grid-column: 1 / -1 !important;
  }
}

/* Desktop: 6-col Grid für 50/50 Row 2.
   Wichtig: Wir nutzen die existierenden [data-tile=...]-Selektoren (gleiche
   Specificity wie hero-v3.css), damit unsere !important die alten
   Asymmetric-Bento-Regeln aus hero-v3.css (Z.17047+) overriden.
   grid-row: auto resettet die alte „grid-row: 3" Vorgabe. */
@media (min-width: 1024px) {
  .suite-bento-stripe {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
  }
  /* Row 1: Marketing + Consulting → je 3 Spalten (50/50 Services) */
  .suite-bento-stripe > .bento-tile[data-tile="marketing"],
  .suite-bento-stripe > .bento-tile[data-tile="consulting"] {
    grid-column: span 3 !important;
    grid-row: auto !important;
  }
  /* Row 2: Bookmi + Yummi + Shopmi → je 2 Spalten (3 Apps gleichmäßig) */
  .suite-bento-stripe > .bento-tile[data-tile="bookmi"],
  .suite-bento-stripe > .bento-tile[data-tile="yummi"],
  .suite-bento-stripe > .bento-tile[data-tile="shopmi"] {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
}

} /* @layer base */