/* Vorlage „Kompakt“: One-Pager wie ein Flyer – farbiges Kopfband, schmale Spalte, Angebotsliste, Bewertungsleiste.
   Hauptfarbe kommt aus --c-primary (nie hier setzen). Schrift selbst gehostet (assets/sites/fonts/). */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

.site--kompakt { --c-accent: #fcc000; --c-bg: #ffffff; --c-alt: #f3f5f8; --c-line: #e3e7ee; --radius: 14px; --radius-btn: 10px; --wrap: 800px; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: var(--font-body); --shadow: 0 1px 2px rgba(15, 23, 42, .06); }

/* Kopf: schlicht, nicht mitlaufend, nur Marke und Anfrage-Knopf */
.site--kompakt .s-header { position: static; border: 0; background: var(--c-primary); }
.site--kompakt .s-header__inner { min-height: 64px; }
.site--kompakt .s-brand { color: var(--c-on-primary) !important; }
.site--kompakt .s-brand__initial { background: var(--c-on-primary); color: var(--c-primary); border-radius: 10px; }
.site--kompakt .s-nav a:not(.s-nav__cta) { display: none; }
.site--kompakt .s-nav .s-nav__cta { background: var(--c-accent); color: #1d1600; font-weight: 800; }

/* Kopfbereich: farbiges Band, Bild ragt in den nächsten Abschnitt */
.site--kompakt .s-hero { padding: 32px 0 0; text-align: center; background: linear-gradient(180deg, var(--c-primary) 0, var(--c-primary) calc(100% - 110px), var(--c-bg) calc(100% - 110px)); color: var(--c-on-primary); }
.site--kompakt .s-hero--plain { padding-bottom: 48px; background: var(--c-primary); }
.site--kompakt .s-hero__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
.site--kompakt .s-hero__kicker { color: inherit; opacity: .85; }
.site--kompakt .s-hero h1 { font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 2.9rem); letter-spacing: -.025em; }
.site--kompakt .s-hero__lead { margin: 0 auto; color: inherit; opacity: .9; }
.site--kompakt .s-hero__actions { justify-content: center; }
.site--kompakt .s-hero .s-btn { background: var(--c-on-primary); border-color: var(--c-on-primary); color: var(--c-primary) !important; }
.site--kompakt .s-hero .s-btn--ghost { background: transparent; color: var(--c-on-primary) !important; }
.site--kompakt .s-hero__rating { color: inherit; opacity: .9; }
.site--kompakt .s-hero__media { width: 100%; }
.site--kompakt .s-hero__media img { aspect-ratio: 16 / 7; border-radius: 18px; box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .45); }

/* Abschnitte: kompakt, Titel mit Farbbalken */
.site--kompakt .s-section { padding: 44px 0; }
.site--kompakt .s-section--alt { background: var(--c-alt); }
.site--kompakt .s-title { font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; margin-bottom: 18px !important; }
.site--kompakt .s-title::before { content: ''; flex: 0 0 6px; height: 1.1em; border-radius: 3px; background: var(--c-primary); }

/* Angebote: Liste mit kleinem Bild links, Preis rechts */
.site--kompakt .s-cards--list { gap: 0; }
.site--kompakt .s-card { position: relative; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; box-shadow: none; background: transparent; padding: 18px 0; gap: 18px; }
.site--kompakt .s-cards--list .s-card__media { flex: 0 0 120px; aspect-ratio: 1; min-height: 0; border-radius: 12px; align-self: flex-start; font-size: 2.4rem; }
.site--kompakt .s-card__body { padding: 0 130px 0 0; gap: 4px; }
.site--kompakt .s-card__body h3 { font-size: 1.1rem; font-weight: 800; }
.site--kompakt .s-card__price { position: absolute; top: 18px; right: 0; margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--c-alt); font-size: .95rem; white-space: nowrap; }
.site--kompakt .s-card__text { font-size: .92rem; }
.site--kompakt .s-facts--inline { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.site--kompakt .s-card__actions { margin-top: 6px; }

/* Über uns: eine Spalte */
.site--kompakt .s-about { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.site--kompakt .s-area { padding: 14px 18px; border: 0; border-left: 4px solid var(--c-accent); border-radius: 0 12px 12px 0; }
.site--kompakt .s-area h3 { font-size: 1rem; margin-bottom: 4px; }

/* Bewertungen: waagerechte Leiste zum Wischen */
.site--kompakt .s-reviews { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.site--kompakt .s-review { flex: 0 0 min(300px, 85%); scroll-snap-align: start; padding: 16px 18px; font-size: .95rem; }

/* Anfrage: eine Spalte */
.site--kompakt .s-section--accent { border-top: 0; background: var(--c-alt); }
.site--kompakt .s-inquiry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.site--kompakt .s-form { border: 1px solid var(--c-line); }
.site--kompakt .s-form button { justify-self: stretch; }

/* Fuß: eine Zeile */
.site--kompakt .s-footer { padding: 20px 0; background: var(--c-bg); color: var(--c-muted); border-top: 1px solid var(--c-line); font-size: .85rem; }
.site--kompakt .s-footer strong { color: var(--c-text); }
.site--kompakt .s-footer br { display: none; }
.site--kompakt .s-footer a { color: var(--c-text); }

@media (max-width: 560px) {
  .site--kompakt .s-hero { background: linear-gradient(180deg, var(--c-primary) 0, var(--c-primary) calc(100% - 60px), var(--c-bg) calc(100% - 60px)); }
  .site--kompakt .s-hero__media img { aspect-ratio: 4 / 3; }
  .site--kompakt .s-cards--list .s-card { flex-direction: row; }
  .site--kompakt .s-cards--list .s-card__media { flex: 0 0 84px; aspect-ratio: 1; }
  .site--kompakt .s-card__body { padding-right: 0; }
  .site--kompakt .s-card__price { position: static; align-self: flex-start; order: 3; }
}