/*
Theme Name: Garten-Klima
Template: twentytwentyfive
Description: Child-Theme für garten-klima.de – Gärtnern im Klimawandel.
Author: PERFUSIONS GmbH
Version: 1.0.2
Text Domain: garten-klima
*/

/* ---------- Kopfbereich ---------- */
.gk-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); position: sticky; top: 0; z-index: 50; }
.gk-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--leaf-dark); }
.gk-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--wp--preset--color--leaf); display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }

/* ---------- Hero ---------- */
.gk-hero { background: linear-gradient(135deg, var(--wp--preset--color--leaf-dark) 0%, var(--wp--preset--color--leaf) 100%); color: #fff; border-radius: 0 0 32px 32px; }
.gk-hero h1, .gk-hero p { color: #fff; }
.gk-hero p { opacity: .92; max-width: 640px; }
.gk-page-hero { background: var(--wp--preset--color--sand); border-radius: 0 0 32px 32px; }
.gk-page-hero .wp-block-post-featured-image img { border-radius: 24px; box-shadow: 0 12px 30px rgba(31, 61, 37, .15); background: #fff; }
.gk-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--wp--preset--color--leaf); }
.gk-hero .gk-kicker { color: var(--wp--preset--color--sun); }

/* ---------- Kurskarten (Startseite) ---------- */
.gk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.gk-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 20px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.gk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(31, 61, 37, .14); }
.gk-card__img { aspect-ratio: 16 / 10; background: var(--wp--preset--color--sand); display: grid; place-items: center; }
.gk-card__img img { width: 62%; height: 80%; object-fit: contain; }
.gk-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gk-card__num { font-size: .75rem; font-weight: 700; color: var(--wp--preset--color--leaf); letter-spacing: .1em; text-transform: uppercase; }
.gk-card__title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0; }
.gk-card__title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.gk-card__title a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.gk-card__text { font-size: .92rem; color: var(--wp--preset--color--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Abschnitte auf Kursseiten ---------- */
.gk-text > :first-child { margin-top: 0; }
.gk-text ul { padding-left: 1.2em; }
.gk-section { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 24px; padding: clamp(20px, 4vw, 40px) !important; margin-block: 32px !important; }
.gk-section > h2:first-child { margin-top: 0; }
.gk-section img { border-radius: 14px; height: auto; max-width: 100%; }
.gk-section video, .entry-content video { width: 100%; border-radius: 16px; background: #000; }

/* ---------- Interaktive Lerneinheiten (H5P) ---------- */
.gk-h5p { border: 1px solid var(--wp--preset--color--line); border-radius: 16px; background: var(--wp--preset--color--sand); margin-block: 12px !important; overflow: hidden; }
.gk-h5p > summary { cursor: pointer; padding: 16px 20px 16px 56px; font-weight: 700; position: relative; list-style: none; }
.gk-h5p > summary::-webkit-details-marker { display: none; }
.gk-h5p > summary::before { content: "▶"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--wp--preset--color--leaf); color: #fff; font-size: 10px; display: grid; place-items: center; transition: transform .2s; }
.gk-h5p[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.gk-h5p[open] > summary { border-bottom: 1px solid var(--wp--preset--color--line); }
.gk-h5p > :not(summary) { padding: 16px; background: #fff; margin: 0 !important; }

/* ---------- Downloads ---------- */
.gk-downloads { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.gk-downloads li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; background: #fff; }
.gk-downloads li::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--wp--preset--color--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gk-downloads a { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast); flex: 1; }
.gk-downloads a:hover { color: var(--wp--preset--color--leaf); }
.gk-meta { font-size: .8rem; color: var(--wp--preset--color--muted); white-space: nowrap; }

/* ---------- Fußbereich ---------- */
.gk-footer { background: var(--wp--preset--color--leaf-dark); color: #e8f0e6; }
.gk-footer a { color: #fff; }

@media (max-width: 600px) {
  .gk-downloads li { flex-wrap: wrap; }
  .gk-hero, .gk-page-hero { border-radius: 0 0 20px 20px; }
}