/* Gestaltung der einbettbaren Bausteine. Farben kommen aus der Palette des aktiven Themes (Slugs: background, foreground, primary, secondary, tertiary, background-alt);
   ohne diese Palette gelten die Standardwerte der Jugendfeuerwehr (dunkles Design). */
.jf-embed{--jf-text:var(--wp--preset--color--foreground,#fff);--jf-bg:var(--wp--preset--color--background,#0B132B);--jf-primary:var(--wp--preset--color--primary,#38BDF8);--jf-second:var(--wp--preset--color--secondary,#818CF8);--jf-card:var(--wp--preset--color--tertiary,#1C2541);--jf-muted:var(--wp--preset--color--background-alt,#CBD5E1);--jf-line:rgba(127,140,165,.35);margin-block:1.5rem;line-height:1.6}
.jf-embed *,.jf-embed *::before,.jf-embed *::after{box-sizing:border-box}
.jf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jf-embed img{max-width:100%;height:auto;display:block}
.jf-btn,.jf-embed .btn{display:inline-flex;align-items:center;justify-content:center;padding:.65em 1.3em;border:2px solid var(--jf-primary);background:var(--jf-primary);color:var(--jf-bg);font:inherit;font-weight:700;border-radius:999px;text-decoration:none;cursor:pointer;transition:filter .15s,transform .15s}
.jf-btn:hover,.jf-embed .btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.jf-filter{display:flex;gap:.6rem;max-width:520px;margin-bottom:1rem}
.jf-embed input[type=search],.jf-embed input[type=text],.jf-embed input[type=email],.jf-embed textarea{width:100%;font:inherit;padding:.65em .8em;border:1.5px solid var(--jf-line);border-radius:8px;background:var(--jf-card);color:var(--jf-text)}
.jf-embed input:focus,.jf-embed textarea:focus{outline:3px solid color-mix(in srgb,var(--jf-primary) 40%,transparent);border-color:var(--jf-primary)}
.jf-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1.5rem}
.jf-chip{display:inline-block;padding:.2em .85em;background:color-mix(in srgb,var(--jf-primary) 16%,transparent);color:var(--jf-primary);border:1.5px solid color-mix(in srgb,var(--jf-primary) 35%,transparent);border-radius:999px;font-size:.85rem;font-weight:700;text-decoration:none}
a.jf-chip:hover,.jf-chip--on{background:var(--jf-primary);color:var(--jf-bg);border-color:var(--jf-primary)}
.jf-grid,.jf-gallery,.jf-team{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem}
.jf-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.jf-card{background:var(--jf-card);color:var(--jf-text);border:1px solid var(--jf-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .25s,border-color .25s;margin:0}
.jf-card:hover{transform:translateY(-3px);border-color:var(--jf-primary)}
.jf-card__media{display:block;aspect-ratio:16/10;background:color-mix(in srgb,var(--jf-card) 70%,#000);overflow:hidden}
.jf-card__media img{width:100%;height:100%;object-fit:cover}
.jf-card__body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.jf-card h3{margin:.1em 0;font-size:1.15rem;line-height:1.25}
.jf-card h3 a{color:var(--jf-text);text-decoration:none}.jf-card h3 a:hover{color:var(--jf-primary)}
.jf-card p{margin:0;color:var(--jf-muted)}.jf-by{font-size:.85rem}
.jf-meta{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-size:.85rem}
.jf-gallery{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}
.jf-gallery li{margin:0}.jf-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;transition:transform .3s}.jf-gallery a:hover img{transform:scale(1.02)}
.jf-team{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.jf-person{text-align:center;background:var(--jf-card);color:var(--jf-text);border:1px solid var(--jf-line);border-radius:14px;padding:1.4rem 1rem;margin:0}
.jf-person img,.jf-person__avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:3px solid var(--jf-primary)}
.jf-person__avatar{display:grid;place-items:center;background:linear-gradient(135deg,var(--jf-primary),var(--jf-second));color:var(--jf-bg);font-size:2.4rem;font-weight:800}
.jf-person h3{margin:0;font-size:1.05rem}.jf-person p{margin:.2rem 0 0;color:var(--jf-muted)}
.jf-pager{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin:2rem 0 0}
.jf-pager__item{padding:.4em .85em;border:1.5px solid var(--jf-line);border-radius:999px;text-decoration:none;background:var(--jf-card);color:var(--jf-text);font-weight:600}
.jf-pager__item.current{background:var(--jf-primary);color:var(--jf-bg);border-color:var(--jf-primary)}.jf-pager__item.dots{border:0;background:none}
.jf-empty{padding:2rem;text-align:center;color:var(--jf-muted);border:2px dashed var(--jf-line);border-radius:14px}
/* Kontaktformular */
.jf-embed .form .field{margin:0 0 1.1rem}.jf-embed .form .field label{display:block;font-weight:600;margin-bottom:.3rem}.jf-embed .req{color:var(--jf-primary)}
.jf-embed .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.jf-embed .hint{color:var(--jf-muted);font-size:.9rem}
.jf-embed .notice{padding:.8rem 1rem;border-radius:8px;margin:0 0 1rem;border-left:5px solid var(--jf-primary);background:var(--jf-card);color:var(--jf-text)}
.jf-embed .notice--err{border-color:#F87171}.jf-embed .notice--ok{border-color:#34D399}