/* ────────────────────────────────────────────────────────────────────
   FLOWNIQ Dialekt — DENSE / PRODUCTIVE
   Informationsdicht. Kompakte Spacing. Dashboard-Anmutung.
   Mehr Spalten, kleinere Typo, mehr Inhalt pro Screen. Effizient.
   ──────────────────────────────────────────────────────────────────── */

body { font-size: 14px; line-height: 1.5; }

/* Smaller spacing scale */
.section { padding-top: 56px; padding-bottom: 56px; }
.section-sm { padding-top: 40px; padding-bottom: 40px; }
.container { max-width: 1320px; padding-left: 20px; padding-right: 20px; }

/* ─── Typography: tightened scale ─── */
h1, .display { font-weight: 700 !important; letter-spacing: -0.02em; }
h2 { font-size: 26px; line-height: 1.2; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; }
h4 { font-size: 14px; line-height: 1.35; font-weight: 600; }
p { font-size: 14px; line-height: 1.5; }
.lead { font-size: 15px; line-height: 1.55; }
.overline { font-size: 10px; letter-spacing: 0.06em; }
.eyebrow { padding: 4px 8px; font-size: 10px; gap: 6px; }
.caption { font-size: 11px; }

/* Tabular nums for productivity */
* { font-variant-numeric: tabular-nums; }

/* ─── Header: compact ─── */
.site-header__inner { height: 52px; gap: var(--sp-5); }
.site-header__logo img { height: 22px; }
.site-header__nav { gap: 2px; margin-left: var(--sp-3); }
.site-header__nav a, .site-header__nav button { padding: 5px 9px; font-size: 12px; }
.site-header__cta .btn-sm { font-size: 11px; padding: 5px 10px; }

/* ─── HERO: information-dense w/ KPI strip ─── */
.hero { padding: 48px 0 40px; }
.hero__grid { gap: 48px; align-items: center; }
.hero__copy { gap: 16px; }
.hero__title {
  font-size: clamp(28px, 3.6vw, 42px) !important;
  line-height: 1.12 !important; letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}
.hero__title em::after { height: 3px; bottom: 2px; }
.hero__sub { font-size: 14px !important; line-height: 1.55 !important; max-width: 520px; }
.hero__cta .btn { font-size: 13px; padding: 9px 16px; }
.hero__cta .btn-lg { font-size: 13px; padding: 10px 18px; }
.hero__meta { font-size: 11px; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-1); margin-top: 8px; }

/* Workflow visual — compact */
.flow-visual { padding: var(--sp-3); border-radius: 6px; }
.flow-visual__head { padding-bottom: 10px; margin-bottom: 12px; }
.flow-node { padding: 8px 12px; gap: 12px; border-radius: 4px; }
.flow-node__ic { width: 26px; height: 26px; }
.flow-node__t { font-size: 12px; }
.flow-node__s { font-size: 10px; }
.flow-arrow { height: 8px; margin-left: 18px; }

/* ─── Buttons: smaller ─── */
.btn { font-size: 13px; padding: 7px 13px; border-radius: 5px; font-weight: 600; }
.btn-sm { font-size: 11px; padding: 5px 10px; }
.btn-lg { font-size: 13px; padding: 9px 16px; }

/* ─── Section heads: smaller, denser ─── */
.section-head { margin-bottom: 32px; gap: 8px; }
.section-head h2 { font-size: 26px; }
.section-head .lead { font-size: 14px; }

/* ─── Feature grid: 4-up ─── */
.feature-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  padding: 16px; gap: 10px; border-radius: 6px;
}
.feature__icon { width: 28px; height: 28px; border-radius: 4px; }
.feature__icon svg { width: 16px; height: 16px; }
.feature__title { font-size: 15px; font-weight: 600; }
.feature__body { font-size: 12px; line-height: 1.5; }

/* Use-case cards smaller */
.use-case-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
@media (max-width: 1100px) { .use-case-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.use-case-grid .card-image { aspect-ratio: 16/9; }
.use-case-grid .placeholder-mark { font-size: 14px; }

/* Action-card row: 3-up */
.action-row { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.alert-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }

/* Cards & Actions */
.card { padding: 16px; border-radius: 6px; }
.card-lg { padding: 20px; border-radius: 6px; }
.card-action { padding: 12px 16px; border-radius: 6px; gap: 12px; }
.card-action .feature__icon { width: 32px; height: 32px; }

/* Logo wall: more columns */
.logo-wall { grid-template-columns: repeat(8, 1fr); border-radius: 6px; }
@media (max-width: 1000px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
.logo-wall__cell { min-height: 70px; padding: 16px 8px; font-size: 12px; font-weight: 700; }
.logo-wall__cell:nth-child(6n) { border-right: 1px solid var(--border-1); }
.logo-wall__cell:nth-child(8n) { border-right: 0; }

/* Stats — many, small */
.stats { grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(3, 1fr) !important; } }
.stat__num { font-size: 28px; font-weight: 800; }
.stat__label { font-size: 11px; margin-top: 6px; }
.stat__sub { font-size: 10px; }
.stats--inverse { padding: 8px 0; }

/* Testimonial — compact */
.testimonial { padding: 32px; gap: 32px; border-radius: 6px; }
.testimonial__quote { font-size: 18px !important; line-height: 1.4 !important; font-weight: 500 !important; }
.testimonial__quote::before { font-size: 32px; height: 16px; }
.testimonial__person { margin-top: 16px; gap: 12px; }
.testimonial__avatar { width: 40px; height: 40px; font-size: 13px; }
.testimonial__logo { min-height: 120px; padding: 16px; }
.testimonial__logo .l { font-size: 22px; }

/* Pricing — compact */
.pricing { padding: 20px; border-radius: 6px; gap: 14px; }
.pricing__price .amt { font-size: 28px; }
.pricing__name { font-size: 16px; }
.pricing__list { gap: 6px; }
.pricing__list li { font-size: 12px; }
.pricing__badge { font-size: 9px; padding: 2px 8px; }

/* Team — 6-up */
.team-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.team-card { padding: 12px; gap: 6px; }
.team-card__photo { font-size: 24px; }
.team-card__name { font-size: 14px; }
.team-card__role { font-size: 11px; }
.team-card__bio { font-size: 11px; line-height: 1.45; }
.team-card__links a { width: 24px; height: 24px; }

/* CTA banner — compact */
.cta-banner { padding: 32px 40px; border-radius: 6px; }
.cta-banner h2 { font-size: 24px; }
.cta-banner p { font-size: 13px; }

/* Page header: compact */
.page-header { padding: 40px 0 32px; }
.page-header__title { font-size: clamp(28px, 3vw, 36px) !important; font-weight: 700 !important; }
.page-header__sub { font-size: 14px; }
.breadcrumbs { font-size: 11px; }

/* Anchor nav: tight */
.anchor-nav { padding: 4px; gap: 2px; top: 60px; border-radius: 6px; }
.anchor-nav a { font-size: 11px; padding: 5px 9px; }

/* Tabs: small */
.tabs__list { padding: 3px; }
.tabs__tab { font-size: 12px; padding: 6px 10px; }
.tabs { gap: 24px; }

/* Accordion: compact rows */
.accordion__item { border-radius: 6px; }
.accordion__head { padding: 12px 18px; font-size: 14px; gap: 12px; }
.accordion__icon { width: 22px; height: 22px; }
.accordion__icon svg { width: 11px; height: 11px; }
.accordion__body { padding: 0 18px; }
.accordion__body-inner { font-size: 13px; padding-bottom: 16px; }
.accordion { gap: 6px; }

/* Alerts: dense */
.alert { padding: 10px 14px; gap: 10px; border-radius: 6px; }
.alert__icon { width: 18px; height: 18px; }
.alert__title { font-size: 12px; }
.alert__msg { font-size: 12px; line-height: 1.45; }

/* Form: compact */
.input, .select, .textarea { padding: 7px 10px; font-size: 13px; border-radius: 4px; }
.field-label { font-size: 12px; }
.field-help { font-size: 11px; }
.field { gap: 4px; }

/* Table: extra dense */
.data-table { font-size: 12px; }
.data-table th, .data-table td { padding: 7px 12px; }
.data-table th { font-size: 10px; }
.data-table .avatar { width: 22px; height: 22px; font-size: 10px; }
.table-wrap { border-radius: 6px; }
.table-toolbar { padding: 10px 14px; }

/* Pagination compact */
.pagination .page, .pagination .step { min-width: 28px; height: 28px; font-size: 12px; }

/* Charts: compact */
.chart-card { padding: 16px; border-radius: 6px; }
.chart-card__title { font-size: 14px; }
.bar-chart { height: 140px; gap: 6px; padding: 0 8px; }

/* Timeline compact */
.timeline__row { padding-bottom: 20px; grid-template-columns: 90px 24px 1fr; gap: 14px; }
.timeline__title { font-size: 14px; }
.timeline__body { font-size: 12px; }
.timeline__date { font-size: 11px; }

/* Stepper compact */
.stepper__num { width: 24px; height: 24px; font-size: 11px; }
.stepper__label { font-size: 12px; }
.stepper__sub { font-size: 11px; }
.stepper { gap: 14px; }

/* Badges, chips: small */
.badge { font-size: 10px; padding: 1px 6px; }
.chip { font-size: 11px; padding: 4px 8px; }

/* Progress bar */
.progress__track { height: 4px; }

/* Footer compact */
.site-footer { padding-top: 48px; padding-bottom: 16px; margin-top: 56px; }
.site-footer__top { padding-bottom: 32px; gap: 32px; }
.site-footer__col h4 { font-size: 11px; margin-bottom: 12px; }
.site-footer__col ul { gap: 6px; }
.site-footer__col a { font-size: 12px; }
.site-footer__brand img { height: 22px; }
.site-footer__brand p { font-size: 12px; }
.site-footer__bottom { font-size: 11px; padding-top: 16px; }

/* Code block dense */
.code-block { padding: 14px; font-size: 11px; line-height: 1.5; border-radius: 6px; }

/* Cookie banner: tighter */
.cookie-banner { padding: 14px 18px; gap: 14px; border-radius: 8px; }
.cookie-banner__icon { width: 32px; height: 32px; }
.cookie-banner__body strong { font-size: 12px; }
.cookie-banner__body p { font-size: 11px; }

/* Back to top: smaller */
.back-to-top { width: 36px; height: 36px; }