/*
Theme Name: j@m
Theme URI: https://example.com
Author: j@m Kremsmünster
Description: Theme für das JugendImpulszentrum j@m im Stift Kremsmünster. Grün-oranges Designsystem mit Event-Verwaltung (Custom Post Type) und Rückblicken (Beiträge).
Version: 1.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: jam
*/

:root{
  --jam-gruen:#76B82A; --jam-gruen-dunkel:#5C951E;
  --jam-orange:#EE9D1B; --jam-orange-dunkel:#CE8410;
  --tinte:#242A1C; --tinte-60:#5C6152;
  --papier:#FCFCF9; --lind:#EFF6E3; --sonne:#FCF0DA; --linie:#E3E5DC;
  --fehler:#C93C2C;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Outfit',sans-serif;
  --font-utility:'Space Mono',monospace;
  --text-hero:clamp(2.6rem,8vw,5rem);
  --text-h1:clamp(2.2rem,6vw,3.6rem);
  --text-h2:clamp(1.6rem,4vw,2.2rem);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
  --radius-card:20px;--radius-input:12px;--radius-pill:999px;
  --schatten:0 4px 16px rgba(36,42,28,.08);
  --schatten-hover:0 8px 28px rgba(36,42,28,.14);
  --breite-max:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--tinte);background:var(--papier)}
.wrap{max-width:var(--breite-max);margin:0 auto;padding:0 var(--s3)}
img{max-width:100%;height:auto;display:block}
a{color:var(--jam-orange-dunkel)}
section{padding:var(--s6) 0}
@media (min-width:861px){section{padding:var(--s7) 0}}
.tinted{background:var(--lind)}
.eyebrow{font-family:var(--font-utility);font-size:.8125rem;text-transform:uppercase;letter-spacing:.12em;color:var(--jam-orange-dunkel);display:block;margin-bottom:var(--s1)}
.sek-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sek-kopf h2,h2.sek{font-family:var(--font-display);font-weight:800;font-size:var(--text-h2)}
.intro{color:var(--tinte-60);max-width:62ch}
.prosa{max-width:68ch}
.prosa p{margin-bottom:var(--s2)}
.prosa p.leise{color:var(--tinte-60)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:14px 28px;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-decoration:none}
.btn:focus-visible{outline:3px solid var(--jam-orange);outline-offset:3px}
.btn-primary{background:var(--jam-gruen);color:#fff}
.btn-primary:hover{background:var(--jam-gruen-dunkel);transform:translateY(-2px);box-shadow:var(--schatten-hover)}
.btn-orange{background:var(--jam-orange);color:#fff}
.btn-orange:hover{background:var(--jam-orange-dunkel);transform:translateY(-2px);box-shadow:var(--schatten-hover)}
.btn-secondary{background:transparent;color:var(--jam-gruen-dunkel);border-color:var(--jam-gruen)}
.btn-secondary:hover{background:var(--lind);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--tinte);padding:14px 8px}
.btn-ghost:hover{color:var(--jam-gruen-dunkel)}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,252,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.nav-inner{max-width:var(--breite-max);margin:0 auto;padding:14px var(--s3);display:flex;align-items:center;gap:var(--s3)}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.6rem;text-decoration:none;line-height:1}
.logo .jm{color:var(--jam-gruen)}.logo .at{color:var(--jam-orange)}
.logo img{height:44px;width:auto}
.nav ul{display:flex;gap:var(--s3);list-style:none;margin-left:auto}
.nav ul a{text-decoration:none;color:var(--tinte);font-weight:500;position:relative}
.nav ul a:hover{color:var(--jam-gruen-dunkel)}
.nav ul .current-menu-item>a::after,.nav ul .current_page_item>a::after,
.nav ul .current-menu-ancestor>a::after,.nav ul .current_page_parent>a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--jam-orange)}
.nav .btn{padding:10px 22px;font-size:.9rem}
.burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px}
.burger:focus-visible{outline:3px solid var(--jam-orange)}
.burger span{display:block;width:26px;height:3px;background:var(--tinte);border-radius:3px;margin:5px 0}
.mobilmenu{display:none;position:fixed;inset:0;z-index:60;background:var(--papier);padding:var(--s4) var(--s3);flex-direction:column;overflow:auto}
.mobilmenu.offen{display:flex}
.mobilmenu .kopf{display:flex;align-items:center;justify-content:space-between}
.mobilmenu ul{list-style:none;margin-top:var(--s5);display:grid;gap:var(--s3)}
.mobilmenu ul a{font-family:var(--font-display);font-weight:700;font-size:1.8rem;color:var(--tinte);text-decoration:none}
.mobilmenu ul a:hover{color:var(--jam-gruen-dunkel)}
.mobilmenu .btn{margin-top:var(--s5);justify-content:center}
.schliessen{background:none;border:none;font-size:2.2rem;line-height:1;cursor:pointer;color:var(--tinte);padding:4px 10px;border-radius:10px}
.schliessen:focus-visible{outline:3px solid var(--jam-orange)}
@media (max-width:860px){.nav ul,.nav>.nav-inner>.btn{display:none}.burger{display:block}}

/* Hero (Startseite) */
.hero{position:relative;overflow:hidden;padding:var(--s7) 0;background:var(--papier)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:center}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:var(--text-hero);line-height:1.02;letter-spacing:-.02em}
.hero h1 .gruen{color:var(--jam-gruen)}.hero h1 .orange{color:var(--jam-orange)}
.hero p{margin:var(--s3) 0 var(--s4);font-size:1.2rem;color:var(--tinte-60);max-width:46ch}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero-bild{position:relative;aspect-ratio:4/5;border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(160deg,var(--jam-gruen),var(--jam-orange));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--schatten-hover)}
.hero-bild img{width:100%;height:100%;object-fit:cover}
.hero-bild .platzhalter{color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.1rem;text-align:center;padding:var(--s3);opacity:.9}
.hero-bild .sticker{position:absolute;bottom:18px;left:18px}
.kringel{position:absolute;left:-140px;bottom:-140px;width:380px;height:380px;border-radius:50%;
  border:30px solid var(--jam-orange);opacity:.12;pointer-events:none}
@media (max-width:860px){.hero{padding:var(--s5) 0}.hero .wrap{grid-template-columns:1fr}.hero-bild{aspect-ratio:16/10}}

/* Seitenkopf */
.seitenkopf{position:relative;overflow:hidden;padding:var(--s6) 0;border-bottom:1px solid var(--linie)}
.seitenkopf h1{font-family:var(--font-display);font-weight:800;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
.seitenkopf p{margin-top:var(--s2);font-size:1.15rem;color:var(--tinte-60);max-width:56ch}
.seitenkopf .kringel{left:auto;right:-120px;top:-60px;bottom:auto;width:300px;height:300px;border-width:26px}
.seitenkopf .meta-zeile{margin-top:var(--s2);font-family:var(--font-utility);font-size:.9rem;color:var(--jam-gruen-dunkel)}

/* Karten */
.cards{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--schatten);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;text-decoration:none;color:var(--tinte)}
.card:hover{transform:translateY(-4px);box-shadow:var(--schatten-hover)}
.card .bild{height:170px;position:relative;background:linear-gradient(135deg,var(--jam-gruen),var(--jam-orange));
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:2rem}
.sticker{background:var(--sonne);color:var(--jam-orange-dunkel);font-family:var(--font-utility);font-weight:700;
  font-size:.8rem;text-align:center;line-height:1.15;padding:10px 14px;border-radius:14px;
  transform:rotate(-3deg);box-shadow:0 3px 10px rgba(36,42,28,.18)}
.sticker b{display:block;font-size:1.35rem}
.card .bild .sticker{position:absolute;top:14px;left:14px}
.card .inhalt{padding:var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.card .tag{align-self:flex-start;background:var(--lind);color:var(--jam-gruen-dunkel);font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:var(--radius-pill)}
.card h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.2}
.card .meta{font-family:var(--font-utility);font-size:.78rem;color:var(--tinte-60)}
.card p{font-size:.9rem;color:var(--tinte-60);flex:1}
.card .mehr{color:var(--jam-orange-dunkel);font-weight:600;font-size:.9rem}
.leer{background:#fff;border:1px dashed var(--linie);border-radius:var(--radius-card);padding:var(--s4);text-align:center;color:var(--tinte-60);grid-column:1/-1}

/* Filter-Pills */
.filter{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s4)}
.filter button{font-family:var(--font-body);font-weight:600;font-size:.9rem;padding:9px 18px;
  border-radius:var(--radius-pill);border:2px solid var(--linie);background:#fff;color:var(--tinte);cursor:pointer;
  transition:background .15s,border-color .15s}
.filter button:hover{border-color:var(--jam-gruen)}
.filter button:focus-visible{outline:3px solid var(--jam-orange);outline-offset:2px}
.filter button.aktiv{background:var(--jam-gruen);border-color:var(--jam-gruen);color:#fff}

/* Fixer Termin-Block */
.fix{background:var(--tinte);color:#fff;border-radius:var(--radius-card);padding:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.fix h3{font-family:var(--font-display);font-weight:800;font-size:1.5rem}
.fix .zeit{font-family:var(--font-utility);color:var(--jam-orange);font-size:.9rem;margin-top:4px}
.fix p{color:rgba(255,255,255,.75);font-size:.95rem;max-width:46ch;margin-top:6px}

/* Team */
.team{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:720px){.team{grid-template-columns:repeat(2,1fr)}}
.person{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--schatten)}
.person .foto{aspect-ratio:4/3;background:linear-gradient(150deg,var(--jam-gruen),var(--jam-orange));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.05rem;text-align:center;padding:var(--s3);position:relative}
.person:nth-child(2) .foto{background:linear-gradient(150deg,var(--jam-orange),var(--jam-gruen-dunkel))}
.person .foto .sticker{position:absolute;bottom:14px;right:14px;font-size:.75rem}
.person .inhalt{padding:var(--s3)}
.person h3{font-family:var(--font-display);font-weight:800;font-size:1.5rem}
.person .rolle{font-family:var(--font-utility);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--jam-gruen-dunkel);margin:4px 0 var(--s2)}
.person blockquote{border-left:4px solid var(--jam-orange);padding-left:var(--s2);color:var(--tinte-60);font-size:.95rem;margin-bottom:var(--s2)}
.person p{font-size:.95rem;color:var(--tinte-60)}

/* Räume-Galerie */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
@media (min-width:720px){.galerie{grid-template-columns:repeat(4,1fr)}}
.galerie figure{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:1}
.galerie .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;text-align:center;padding:var(--s2);font-size:.95rem}
.galerie figcaption{position:absolute;left:10px;bottom:10px;background:rgba(36,42,28,.75);color:#fff;font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:var(--radius-pill)}

/* Pfeiler / Icon-Karten */
.dreier{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:720px){.dreier{grid-template-columns:repeat(3,1fr)}}
.pfeiler{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);padding:var(--s4);box-shadow:var(--schatten)}
.pfeiler .icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2);font-size:1.6rem;background:var(--lind)}
.pfeiler:nth-child(even) .icon{background:var(--sonne)}
.pfeiler h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin-bottom:var(--s1)}
.pfeiler p{font-size:.95rem;color:var(--tinte-60)}
.pfeiler ul{padding-left:1.1em;font-size:.95rem;color:var(--tinte-60);margin-top:6px}
.pfeiler li{margin-bottom:4px}

/* Info-Zeilen */
.infozeilen{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media (min-width:720px){.infozeilen{grid-template-columns:repeat(2,1fr)}}
.infozeile{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);padding:var(--s3);box-shadow:var(--schatten)}
.infozeile h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:6px}
.infozeile p,.infozeile li{font-size:.95rem;color:var(--tinte-60)}
.infozeile ul{padding-left:1.1em;margin-top:4px}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);margin-bottom:var(--s2);overflow:hidden}
.faq summary{cursor:pointer;font-weight:600;padding:var(--s3);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--jam-orange);flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid var(--jam-orange);outline-offset:-3px;border-radius:var(--radius-card)}
.faq .antwort{padding:0 var(--s3) var(--s3);color:var(--tinte-60);font-size:.95rem}

/* Formulare */
.form{max-width:520px;display:grid;gap:var(--s2)}
.field label{display:block;font-weight:600;font-size:.875rem;margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--tinte);
  padding:13px 16px;border:2px solid var(--linie);border-radius:var(--radius-input);background:#fff;transition:border-color .15s}
.field input:hover,.field textarea:hover{border-color:#C8CCBE}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--jam-gruen);box-shadow:0 0 0 4px rgba(118,184,42,.18)}
.field .hint{font-size:.8rem;color:var(--tinte-60);margin-top:5px}

/* Kontakt-Kanäle */
.kanaele{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media (min-width:720px){.kanaele{grid-template-columns:repeat(3,1fr)}}
.kanal{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);padding:var(--s3);box-shadow:var(--schatten);text-decoration:none;color:var(--tinte);transition:transform .15s,box-shadow .15s;display:block}
.kanal:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover)}
.kanal .icon{font-size:1.8rem;margin-bottom:var(--s1)}
.kanal h3{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.kanal p{font-size:.9rem;color:var(--tinte-60);margin-top:4px}

/* Karte */
.karte{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--linie);aspect-ratio:16/8;
  background:linear-gradient(135deg,var(--lind),#fff);display:flex;align-items:center;justify-content:center;
  color:var(--tinte-60);font-weight:600;text-align:center;padding:var(--s3)}

/* CTA-Banner */
.cta-banner{background:linear-gradient(120deg,var(--jam-gruen),var(--jam-gruen-dunkel));border-radius:var(--radius-card);
  padding:var(--s5) var(--s4);color:#fff;display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.cta-banner h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.5vw,2.1rem);max-width:22ch}
.cta-banner p{color:rgba(255,255,255,.85);margin-top:6px;max-width:48ch}
.cta-banner .btn{background:#fff;color:var(--jam-gruen-dunkel)}
.cta-banner .btn:hover{background:var(--sonne);transform:translateY(-2px)}

/* Instagram-Platzhalter */
.insta{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center}
@media (min-width:860px){.insta{grid-template-columns:1fr 1fr}}
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1)}
.insta-grid div{aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,var(--jam-gruen),var(--jam-orange))}
.insta-grid div:nth-child(2){background:linear-gradient(135deg,var(--jam-orange),var(--sonne))}
.insta-grid div:nth-child(4){background:linear-gradient(135deg,var(--lind),var(--jam-gruen))}
.insta-grid div:nth-child(6){background:linear-gradient(135deg,var(--jam-gruen-dunkel),var(--jam-orange))}
.insta h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-h2);margin-bottom:var(--s2)}
.insta p{color:var(--tinte-60);margin-bottom:var(--s3)}

/* Eltern-Block Startseite */
.eltern{background:#fff;border:1px solid var(--linie);border-radius:var(--radius-card);padding:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;box-shadow:var(--schatten)}
.eltern h2{font-family:var(--font-display);font-weight:700;font-size:1.4rem;margin-bottom:6px}
.eltern p{color:var(--tinte-60);font-size:.95rem;max-width:52ch}

/* Artikel-Inhalt (Beiträge, Events, Seiten aus dem Editor) */
.artikel{max-width:72ch}
.artikel>*+*{margin-top:var(--s2)}
.artikel h2{font-family:var(--font-display);font-weight:800;font-size:1.6rem;margin-top:var(--s4)}
.artikel h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin-top:var(--s3)}
.artikel img{border-radius:var(--radius-card)}
.artikel ul,.artikel ol{padding-left:1.3em}
.artikel blockquote{border-left:4px solid var(--jam-orange);padding-left:var(--s2);color:var(--tinte-60)}
.artikel figure.wp-block-image{margin:var(--s3) 0}
.artikel .wp-block-gallery{gap:var(--s2)}
.event-fakten{background:var(--lind);border-radius:var(--radius-card);padding:var(--s3);margin:var(--s3) 0;display:grid;gap:6px;max-width:520px}
.event-fakten div{display:flex;gap:10px;font-size:.95rem}
.event-fakten b{min-width:90px;color:var(--jam-gruen-dunkel)}

/* Footer */
footer.foot{background:var(--tinte);color:#fff;margin-top:var(--s6);padding:var(--s6) 0 var(--s4)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:720px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
footer.foot h4{font-family:var(--font-display);font-weight:700;margin-bottom:var(--s2);color:var(--jam-gruen)}
footer.foot ul{list-style:none}
footer.foot li{margin-bottom:8px}
footer.foot a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.9rem}
footer.foot a:hover{color:var(--jam-orange)}
footer.foot p{font-size:.9rem;color:rgba(255,255,255,.75)}
.foot-logo{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1}
.foot-logo .jm{color:var(--jam-gruen)}.foot-logo .at{color:var(--jam-orange)}
.foot-unten{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--s4);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.5)}
.foot-unten a{font-size:.8rem}

/* Pagination */
.pagination{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s4)}
.pagination .page-numbers{padding:9px 16px;border-radius:var(--radius-pill);border:2px solid var(--linie);background:#fff;color:var(--tinte);text-decoration:none;font-weight:600;font-size:.9rem}
.pagination .page-numbers.current{background:var(--jam-gruen);border-color:var(--jam-gruen);color:#fff}
.pagination .page-numbers:hover{border-color:var(--jam-gruen)}