/* hintergruende.css — Cocos Hintergrundbilder (hintergrundbilder.html, en/wallpapers.html); Kopf und Abschnitte aus thema.css */
.hnutzung{margin-top:14px;color:var(--ink-mute);font-size:14px}
.hsektion .thema-titel{margin-bottom:0}

/* Karten: drei Spalten; das Handy-Bild steht hochkant über zwei Reihen (im Abschnitt zuerst, s. lib/hintergruende.mjs). */
.hgrid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.hkarte{display:flex;flex-direction:column;min-width:0;border-radius:var(--radius);overflow:hidden;background:var(--glass-strong);border:1px solid var(--glass-line);transition:border-color .3s,box-shadow .3s}
.hkarte:hover{border-color:var(--line-strong);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hbild{display:block;aspect-ratio:1672/941;background:rgba(255,255,255,.04);overflow:hidden}
/* Handy-Karte so hoch wie zwei Reihen: Die Vorschau füllt den Rest (absolut, damit sie die Reihen nicht streckt). */
.hkarte[data-format="handy"]{grid-row:span 2;align-self:stretch}
.hkarte[data-format="handy"] .hbild{position:relative;aspect-ratio:auto;flex:1 1 0;min-height:300px}
.hkarte[data-format="handy"] .hbild img{position:absolute;inset:0}
.hbild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.hbild:hover img{transform:scale(1.03)}
.hbild:focus-visible{outline-offset:-3px;border-radius:var(--radius) var(--radius) 0 0}
.hinfo{display:grid;gap:10px;padding:16px 18px 18px}
.hinfo h3{font-size:16.5px;font-weight:700;line-height:1.3}
.hmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--ink-mute)}
.hformat{font-variant-numeric:tabular-nums}
/* KI-Label wie auf der Videoseite (videos.css) */
.ki-label{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--gold)}
.hladen.cta-ghost{justify-self:start;padding:11px 20px;font-size:14px}
.hgroesse{color:var(--ink-mute);font-weight:500;font-size:12.5px}

.hanleitung{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.hanleitung .tkarte p{margin-top:6px}

@media (prefers-reduced-motion:reduce){.hbild img{transition:none}.hbild:hover img{transform:none}}
html.ruhig .hbild img{transition:none}

@media (max-width:1023px){
  .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .hanleitung{grid-template-columns:1fr}
}
@media (max-width:599px){
  .hgrid{grid-template-columns:1fr}
  .hkarte[data-format="handy"]{grid-row:auto}
  .hkarte[data-format="handy"] .hbild{flex:none;min-height:0;aspect-ratio:941/1672;max-height:72vh}
}