/* ============================================================
   GRID — Cross-cutting Templates: grid, grid-detail, quickguides
   Verwendet in: /content/06_support/, /content/testimonials/,
                 /content/08_about/, /content/09_blog/
   ============================================================ */

/* ---- Page-Scope ---- */
.pw-grid-page { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); }
.pw-grid-page .pw-container,
.pw-grid-detail .pw-container { max-width: 960px; margin: 0 auto; padding: 0 var(--pw-space-lg); }
@media (prefers-color-scheme: dark) { .pw-grid-page { color: var(--pw-fg); } }

/* ============================================================
   GRID HUB — Kategorien-Index
   ============================================================ */

/* Hero (analog .sh-hero, aber kompakter) */
.pw-grid-hero { padding: var(--pw-section-hero); text-align: center; background: linear-gradient(180deg, var(--pw-bg-alt) 0%, #fff 100%); }
.pw-grid-hero__title { font-size: 40px; font-weight: 700; color: var(--pw-text); margin: 0 0 12px; letter-spacing: -0.03em; }
.pw-grid-hero__sub { font-size: 17px; color: var(--pw-text-secondary); max-width: 680px; margin: 0 auto; line-height: 1.6; }
.pw-grid-hero__sub a { color: var(--pw-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pw-grid-hero__sub a:hover { color: var(--pw-brand-hover); }
@media (prefers-color-scheme: dark) {
	.pw-grid-hero { background: linear-gradient(180deg, #0a0a0a 0%, #111 100%); }
	.pw-grid-hero__title { color: var(--pw-fg); }
	.pw-grid-hero__sub { color: var(--pw-text-secondary); }
}

/* Kategorie-Sektion (Container für eine Gruppe Karten) */
.pw-grid-section { padding: var(--pw-section-compact); }
.pw-grid-section + .pw-grid-section { padding-top: 0; }
.pw-grid-section__title { font-size: 22px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-lg); letter-spacing: -0.01em; }
@media (prefers-color-scheme: dark) { .pw-grid-section__title { color: var(--pw-fg); } }

/* Grid-Container (3 Spalten, responsive) */
.pw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pw-space-lg); }

/* Einzelkarte */
.pw-grid-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); overflow: hidden; color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; }
.pw-grid-card:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-md); border-color: var(--pw-border-light); color: inherit; }
.pw-grid-card__media { aspect-ratio: 4 / 3; background: var(--pw-bg-alt); overflow: hidden; }
.pw-grid-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pw-grid-card:hover .pw-grid-card__media img { transform: scale(1.03); }
.pw-grid-card__body { padding: 20px 22px var(--pw-space-lg); flex: 1; display: flex; flex-direction: column; }
.pw-grid-card__title { font-size: 17px; font-weight: 700; color: var(--pw-text); margin: 0 0 6px; line-height: 1.35; }
.pw-grid-card__subtitle { font-size: 14px; color: var(--pw-text-secondary); margin: 0 0 var(--pw-space-sm); line-height: 1.5; }
.pw-grid-card__city { font-size: 13px; color: var(--pw-text-muted); margin: 0; font-weight: 500; }
.pw-grid-card__cta { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--pw-link); }
.pw-grid-card:hover .pw-grid-card__cta { color: var(--pw-brand); }

/* Status-Ribbon (frei/kostenpflichtig/neu) */
.pw-grid-card__status { position: absolute; z-index: 2; top: 14px; right: 14px; padding: var(--pw-space-xs) 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--pw-radius-sm); }
.pw-grid-card__status--free { background: #E1F5EE; color: #085041; }
.pw-grid-card__status--paid { background: #FAEEDA; color: #412402; }
.pw-grid-card__status--new { background: var(--pw-brand); color: #fff; }

@media (prefers-color-scheme: dark) {
	.pw-grid-card { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.pw-grid-card:hover { border-color: #333; }
	.pw-grid-card__media { background: #0a0a0a; }
	.pw-grid-card__title { color: var(--pw-fg); }
	.pw-grid-card__subtitle { color: var(--pw-text-secondary); }
	.pw-grid-card__city { color: var(--pw-text-secondary); }
	.pw-grid-card__status--free { background: #0a3a30; color: #6ee7b7; }
	.pw-grid-card__status--paid { background: #3a2102; color: #f5a060; }
}

/* ============================================================
   GRID DETAIL — Person/Partner/Training/Doku/Testimonial
   ============================================================ */
.pw-grid-detail { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); }
@media (prefers-color-scheme: dark) { .pw-grid-detail { color: var(--pw-fg); } }

.pw-grid-detail__container { max-width: 960px; margin: 0 auto; padding: var(--pw-space-3xl) var(--pw-space-lg) var(--pw-space-3xl); }
@media (max-width: 768px) { .pw-grid-detail__container { padding: var(--pw-space-2xl) 20px 60px; } }
.pw-grid-detail__layout { display: grid; grid-template-columns: 1fr 2fr; gap: var(--pw-space-2xl); }
.pw-grid-detail__media { position: sticky; top: 100px; align-self: start; }
.pw-grid-detail__media:empty { display: none; }
.pw-grid-detail__layout:has(.pw-grid-detail__media:empty) { grid-template-columns: 1fr; }
.pw-grid-detail__media img { width: 100%; height: auto; }
.pw-grid-detail__content { min-width: 0; }

/* Hinweis (z. B. "Event vorbei") */
.pw-grid-detail__notice { padding: 12px 18px; margin-bottom: var(--pw-space-lg); background: #fff8eb; border: 1px solid #fce4b8; border-radius: var(--pw-radius-sm); color: #6b4400; font-size: 14px; }
@media (prefers-color-scheme: dark) {
	.pw-grid-detail__notice { background: rgba(var(--pw-brand-rgb),0.08); border-color: rgba(var(--pw-brand-rgb),0.2); color: #f5a060; }
}

.pw-grid-detail__title { font-size: 36px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.02em; color: var(--pw-text); }
.pw-grid-detail__subtitle { font-size: 18px; color: var(--pw-text-secondary); margin: 0 0 var(--pw-space-sm); font-weight: 500; line-height: 1.5; }
.pw-grid-detail__city { font-size: 15px; color: var(--pw-text-muted); margin: 0 0 var(--pw-space-lg); font-weight: 500; }
@media (prefers-color-scheme: dark) {
	.pw-grid-detail__title { color: var(--pw-fg); }
	.pw-grid-detail__subtitle { color: var(--pw-text-secondary); }
	.pw-grid-detail__city { color: var(--pw-text-secondary); }
}

/* Prose-Typografie kommt aus global.css; hier nur Layout-Margin. */
.pw-grid-detail__text { margin: var(--pw-space-lg) 0 var(--pw-space-xl); }

/* ---- Action-Buttons (Email/Phone/Web/Download/Buy/Details) ---- */
.pw-grid-detail__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--pw-space-lg) 0 var(--pw-space-xl); }
.pw-grid-detail__btn { display: inline-flex; align-items: center; gap: var(--pw-space-sm); padding: 10px 18px; background: #fff; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); color: var(--pw-text); font-size: 14px; font-weight: 600; transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.pw-grid-detail__btn:hover { border-color: var(--pw-brand); color: var(--pw-brand); transform: translateY(-1px); }
.pw-grid-detail__btn--primary { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
.pw-grid-detail__btn--primary:hover { background: var(--pw-brand-hover); border-color: var(--pw-brand-hover); color: #fff; }
.pw-grid-detail__btn img { width: 18px; height: 18px; opacity: 0.7; }
.pw-grid-detail__btn--primary img { opacity: 1; filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
	.pw-grid-detail__btn { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.pw-grid-detail__btn--primary { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
}

/* ---- Document-Liste (PDF/HTML/eBook mit Sprach-Pills) ---- */
.pw-grid-detail__docs { margin: var(--pw-space-xl) 0; padding: var(--pw-space-lg) 28px; background: var(--pw-bg-alt); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); }
.pw-grid-detail__docs-title { font-size: 16px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-md); }
.pw-grid-detail__doc { display: flex; align-items: center; gap: var(--pw-space-md); padding: 12px 0; border-bottom: 1px solid var(--pw-border); }
.pw-grid-detail__doc:last-child { border-bottom: none; }
.pw-grid-detail__doc-type { display: inline-block; min-width: 64px; padding: var(--pw-space-xs) 10px; background: #fff; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); font-size: 11px; font-weight: 700; color: var(--pw-text); text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }
.pw-grid-detail__doc-langs { display: flex; gap: var(--pw-space-sm); flex-wrap: wrap; }
.pw-grid-detail__doc-lang { padding: var(--pw-space-xs) 12px; background: #fff; border: 1px solid var(--pw-border-light); border-radius: var(--pw-radius-sm); font-size: 12px; font-weight: 600; color: var(--pw-link); text-transform: uppercase; letter-spacing: 0.5px; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.pw-grid-detail__doc-lang:hover { border-color: var(--pw-brand); background: var(--pw-brand); color: #fff; }
@media (prefers-color-scheme: dark) {
	.pw-grid-detail__docs { background: #0f0f0f; border-color: var(--pw-dark-3); }
	.pw-grid-detail__docs-title { color: var(--pw-fg); }
	.pw-grid-detail__doc { border-bottom-color: rgba(255,255,255,0.06); }
	.pw-grid-detail__doc-type { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-fg); }
	.pw-grid-detail__doc-lang { background: var(--pw-dark-2); border-color: var(--pw-dark-3); color: var(--pw-accent); }
}

/* ============================================================
   QUICKGUIDES — Eigene kompakte Variante
   ============================================================ */
.pw-quickguides { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pw-text); max-width: 880px; margin: 0 auto; padding: var(--pw-space-3xl) var(--pw-space-lg) var(--pw-space-3xl); }
@media (max-width: 768px) { .pw-quickguides { padding: var(--pw-space-2xl) 20px 60px; } }
@media (prefers-color-scheme: dark) { .pw-quickguides { color: var(--pw-fg); } }
.pw-quickguides__title { font-size: 36px; font-weight: 700; margin: var(--pw-space-md) 0 12px; letter-spacing: -0.02em; color: var(--pw-text); }
.pw-quickguides__sub { font-size: 17px; color: var(--pw-text-secondary); margin: 0 0 40px; line-height: 1.6; }
@media (prefers-color-scheme: dark) {
	.pw-quickguides__title { color: var(--pw-fg); }
	.pw-quickguides__sub { color: var(--pw-text-secondary); }
}

.pw-quickguides__list { display: flex; flex-direction: column; gap: 14px; }
.pw-quickguides__item { padding: var(--pw-space-lg) 28px; background: #fff; border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md); transition: border-color 0.2s, box-shadow 0.2s; }
.pw-quickguides__item:hover { border-color: var(--pw-border-light); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.pw-quickguides__item-title { font-size: 17px; font-weight: 700; color: var(--pw-text); margin: 0 0 var(--pw-space-sm); }
.pw-quickguides__item-desc { font-size: 14px; color: var(--pw-text-secondary); margin: 0 0 var(--pw-space-md); line-height: 1.55; }
@media (prefers-color-scheme: dark) {
	.pw-quickguides__item { background: var(--pw-dark-2); border-color: var(--pw-dark-3); }
	.pw-quickguides__item-title { color: var(--pw-fg); }
	.pw-quickguides__item-desc { color: var(--pw-text-secondary); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.pw-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.pw-grid-detail__layout { grid-template-columns: 1fr; gap: var(--pw-space-xl); }
	.pw-grid-detail__media { position: static; max-width: 360px; margin: 0 auto; }
}
@media (max-width: 640px) {
	.pw-grid { grid-template-columns: 1fr; gap: var(--pw-space-md); }
	.pw-grid-hero__title { font-size: 32px; }
	.pw-grid-hero__sub { font-size: 16px; }
	.pw-grid-detail__title { font-size: 28px; }
	.pw-grid-detail__text { font-size: 16px; }
	.pw-grid-detail__docs { padding: 20px; }
	.pw-grid-detail__doc { flex-direction: column; align-items: flex-start; gap: var(--pw-space-sm); }
	.pw-quickguides__title { font-size: 28px; }
	.pw-quickguides__item { padding: 20px; }
}