/* Page polish 2026-10-31. Linked from header.php after the older theme and customizer styles.
   Selectors start with html body.wh-kanz-site so they win over the older rules without !important. */

/* ===================== Magazin: hub and category pages ===================== */
/* Header block: one consistent alignment (centered on tablet and desktop, left on phone). */
html body.wh-kanz-site .mag-hero{padding:72px 0 44px;text-align:center}
html body.wh-kanz-site .mag-hero .mag-hero-inner{max-width:720px;margin:0 auto;text-align:center}
html body.wh-kanz-site .mag-hero h1{font-size:clamp(34px,4.4vw,52px);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:12px 0 16px;text-wrap:balance}
html body.wh-kanz-site .mag-hero .sp-hero-lead{max-width:600px;margin:0 auto;text-align:center;text-wrap:pretty}
html body.wh-kanz-site .mag-hero .mag-filter{justify-content:center;flex-wrap:wrap;gap:8px;margin-top:28px}
html body.wh-kanz-site .mag-hero .mag-filter-btn{min-height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;background:#fff;border:1px solid var(--border);color:var(--text);-webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
html body.wh-kanz-site .mag-hero .mag-filter-btn:hover{border-color:var(--primary);color:var(--primary)}
html body.wh-kanz-site .mag-hero .mag-filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
html body.wh-kanz-site .mag-hero .mag-filter-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

html body.wh-kanz-site .mag-section .mag-card-title{text-wrap:pretty}
html body.wh-kanz-site .mag-section .mag-card-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
html body.wh-kanz-site .mag-section .mag-card:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
html body.wh-kanz-site .mag-section .mag-card-cat{border-radius:8px}

/* Tablet: two calm columns with slightly smaller titles. */
@media (min-width:761px) and (max-width:1199px){
  html body.wh-kanz-site .mag-section .mag-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  html body.wh-kanz-site .mag-section .mag-card-title{font-size:20px}
  html body.wh-kanz-site .mag-section .mag-card-body{padding:20px 22px 22px}
}

/* Phone: one featured article, then a compact list with the picture on the left. */
@media (max-width:760px){
  html body.wh-kanz-site .mag-hero{padding:32px 0 20px;text-align:left}
  html body.wh-kanz-site .mag-hero .mag-hero-inner{text-align:left;margin:0}
  html body.wh-kanz-site .mag-hero h1{font-size:30px;margin:10px 0 12px}
  html body.wh-kanz-site .mag-hero .sp-hero-lead{font-size:16px;line-height:1.6;text-align:left;margin:0}
  /* Filters scroll sideways in one row instead of wrapping. */
  html body.wh-kanz-site .mag-hero .mag-filter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding-inline:var(--pad-x,20px);margin:22px calc(var(--pad-x,20px) * -1) 0;padding:2px var(--pad-x,20px) 4px}
  html body.wh-kanz-site .mag-hero .mag-filter::-webkit-scrollbar{display:none}
  html body.wh-kanz-site .mag-hero .mag-filter-btn{flex:0 0 auto;min-height:44px;padding:0 16px;font-size:14px;scroll-snap-align:start}

  html body.wh-kanz-site .mag-section{padding-top:8px;padding-bottom:48px}
  html body.wh-kanz-site .mag-section .mag-grid{grid-template-columns:1fr;gap:0}
  html body.wh-kanz-site .mag-section .mag-card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start;gap:16px;padding:18px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;transform:none}
  html body.wh-kanz-site .mag-section .mag-card-img{order:0;width:96px;height:96px;flex:none;aspect-ratio:auto;margin:0;border-radius:14px;background:linear-gradient(135deg,#eff5f8,#dbe8ee)}
  html body.wh-kanz-site .mag-section .mag-card-img--ph{display:block}
  html body.wh-kanz-site .mag-section .mag-card-img--ph::after{content:none}
  html body.wh-kanz-site .mag-section .mag-card-body{padding:2px 0 0;display:flex;flex-direction:column;min-width:0}
  html body.wh-kanz-site .mag-section .mag-card-cat{padding:0;margin:0 0 6px;background:none;border-radius:0;font-size:10.5px;letter-spacing:.11em}
  html body.wh-kanz-site .mag-section .mag-card-title{font-size:16.5px;font-weight:600;line-height:1.32;letter-spacing:-.01em;margin:0 0 8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  html body.wh-kanz-site .mag-section .mag-card-excerpt{display:none}
  html body.wh-kanz-site .mag-section .mag-card-meta{font-size:12.5px;gap:8px;flex-wrap:nowrap}
  html body.wh-kanz-site .mag-section .mag-card-link{display:none}
  html body.wh-kanz-site .mag-section .mag-card:active{background:#f4f8fa}

  /* First article of the first page as a large picture card. */
  html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child{display:flex;flex-direction:column;gap:0;padding:8px 0 22px}
  html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-img{width:100%;height:auto;aspect-ratio:16/10;border-radius:18px;margin-bottom:16px}
  html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-title{font-size:21px;line-height:1.25;-webkit-line-clamp:4}
  html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-excerpt{display:-webkit-box;-webkit-line-clamp:2;font-size:15px;line-height:1.55;margin:0 0 12px}
  html body.wh-kanz-site:not(.paged) .mag-section .mag-card:first-child .mag-card-link{display:inline}

  html body.wh-kanz-site .mag-section .mag-pagination{margin-top:32px;gap:6px}
}
@media (max-width:360px){
  html body.wh-kanz-site .mag-section .mag-card{grid-template-columns:80px minmax(0,1fr);gap:14px}
  html body.wh-kanz-site .mag-section .mag-card-img{width:80px;height:80px}
}

/* Category colours as plain text labels on the phone list. */
@media (max-width:760px){
  html body.wh-kanz-site .mag-section .mag-card-cat[data-cat="news"]{color:#1f6f3d}
  html body.wh-kanz-site .mag-section .mag-card-cat[data-cat="presse"]{color:#7a4d00}
  html body.wh-kanz-site .mag-section .mag-card-cat[data-cat="ratgeber"]{color:#2a5f7a}
}