/*
Theme Name: Kiwanis Waldviertel
Theme URI: https://waldviertel.kiwanis.at
Author: Kiwanis Club Waldviertel
Description: Individuelles WordPress-Theme für den Kiwanis Club Waldviertel. Startseite über den Customizer bearbeitbar, eigene Mitglieder-Übersicht (Foto + Name), Jahresringe-Design in Kiwanis-Blau und -Gold.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kiwanis-waldviertel
*/

:root{
  --bg: #EAF2F8;
  --bg-alt: #D9E7F2;
  --forest: #003874;
  --forest-dark: #00264F;
  --gold: #B49759;
  --gold-light: #D8C293;
  --slate: #4A90C2;
  --ink: #16232F;
  --ink-soft: #51606C;
  --paper: #FFFFFF;
  --ring1: #C9DDEC;
  --ring2: #9AC0DC;
  --ring3: #B49759;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Work Sans', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  color:var(--forest-dark);
  line-height:1.15;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
section{padding:96px 0;}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(234,242,248,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(22,35,47,0.08);
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:18px; padding-bottom:18px;
}
.social-link{display:inline-flex; align-items:center; justify-content:center; color:var(--forest); opacity:0.75;}
.social-link:hover{opacity:1;}
.foot-bottom .social-link{color:#AEB9C4;}
.foot-bottom .social-link:hover{color:var(--gold-light);}
.logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--forest-dark);}
.logo img{max-height:48px; width:auto;}
.logo .mark{
  width:34px; height:34px; border-radius:50%;
  background:conic-gradient(var(--ring3) 0 25%, var(--ring2) 25% 50%, var(--ring3) 50% 75%, var(--ring2) 75% 100%);
  display:flex; align-items:center; justify-content:center;
}
.logo .mark span{width:12px; height:12px; border-radius:50%; background:var(--paper);}
nav ul{list-style:none; display:flex; gap:34px; margin:0; padding:0;}
nav a{font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding-bottom:3px;}
nav a:hover{color:var(--forest);}
nav .current-menu-item > a{color:var(--forest);}
nav .current-menu-item > a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold);}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:var(--forest-dark);
  color:var(--paper);
  padding:120px 0 0;
}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:end; padding-bottom:0;}
.hero-eyebrow{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light);
  font-weight:600; margin-bottom:22px; display:block;
}
.hero h1{color:var(--paper); font-size:52px; max-width:560px; margin-bottom:22px;}
.hero p{font-size:17px; color:#D7DEE6; max-width:460px; margin-bottom:34px;}
.hero-ctas{display:flex; gap:14px; margin-bottom:64px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:13px 26px; border-radius:3px; font-size:14.5px; font-weight:500;
  border:1px solid transparent; transition:transform .15s ease; cursor:pointer;
}
.btn:hover{transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:var(--forest-dark);}
.btn-outline{border-color:rgba(255,255,255,0.4); color:var(--paper);}
.btn-forest{background:var(--forest); color:var(--paper);}
.btn-line{border:1px solid var(--forest); color:var(--forest);}
.hero-rings{justify-self:end; align-self:end; position:relative; width:280px; height:280px; margin-bottom:-2px;}
.ring{position:absolute; border-radius:50%; border:1px solid rgba(216,194,147,0.35);}
.ring:nth-child(1){inset:0;}
.ring:nth-child(2){inset:30px; border-color:rgba(216,194,147,0.5);}
.ring:nth-child(3){inset:60px; border-color:rgba(216,194,147,0.7);}
.ring:nth-child(4){inset:90px; background:var(--gold); border:none;}
.treeline{width:100%; display:block; margin-top:56px;}

/* Ring stats */
.stats{background:var(--bg-alt); padding:72px 0;}
.stats .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center;}
.stat-ring{
  width:132px; height:132px; border-radius:50%; margin:0 auto 20px;
  background:
    radial-gradient(circle, var(--paper) 0 38%, transparent 39%),
    repeating-radial-gradient(circle, var(--ring1) 0 6px, var(--ring2) 6px 12px);
  display:flex; align-items:center; justify-content:center;
}
.stat-ring strong{font-family:'Fraunces',serif; font-size:26px; color:var(--forest-dark); font-weight:600;}
.stat-label{font-size:14px; color:var(--ink-soft); font-weight:500;}

/* Event highlight */
.event .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.event-photo{
  aspect-ratio:4/3; border-radius:6px; overflow:hidden; position:relative;
  background:linear-gradient(160deg, var(--forest) 0%, var(--slate) 55%, var(--gold) 130%);
}
.event-photo img{width:100%; height:100%; object-fit:cover;}
.eyebrow{font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:14px;}
.event h2{font-size:36px; margin-bottom:18px;}
.event p{color:var(--ink-soft); font-size:15.5px; margin-bottom:28px; max-width:460px;}
.event-meta{display:flex; gap:28px; margin-bottom:30px; flex-wrap:wrap;}
.event-meta div strong{display:block; font-family:'Fraunces',serif; font-size:18px; color:var(--forest-dark);}
.event-meta div span{font-size:13px; color:var(--ink-soft);}

/* Was wir tun / Mission */
.mission{background:var(--forest-dark); color:var(--paper);}
.mission-head{max-width:520px; margin-bottom:56px;}
.mission-head h2{color:var(--paper); font-size:34px;}
.mission-head p{color:#C7D0D9; margin-top:14px; font-size:15.5px;}
.mission-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.mission-card .ring-num{
  width:52px; height:52px; border-radius:50%; margin-bottom:20px;
  background:repeating-radial-gradient(circle, transparent 0 5px, rgba(216,194,147,0.35) 5px 8px);
  border:1px solid rgba(216,194,147,0.5);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; color:var(--gold-light); font-size:15px;
}
.mission-card h3{color:var(--paper); font-size:19px; margin-bottom:10px;}
.mission-card p{color:#AEB9C4; font-size:14.5px;}

/* Mitgliederbereich (join) */
.join .wrap{
  background:var(--paper); border:1px solid rgba(22,35,47,0.1); border-radius:8px;
  padding:56px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
}
.join h2{font-size:30px; margin-bottom:14px;}
.join p{color:var(--ink-soft); font-size:15px; max-width:420px;}
.join-actions{display:flex; flex-direction:column; gap:12px;}
.join-actions .btn{text-align:center;}

/* Mitglieder-Übersichtsseite */
.mitglieder-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:32px; margin-top:40px;}
.mitglied-card{text-align:center;}
.mitglied-photo{
  width:140px; height:140px; border-radius:50%; margin:0 auto 14px; overflow:hidden;
  border:3px solid var(--gold); padding:4px; background:var(--paper);
}
.mitglied-photo img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.mitglied-photo.empty{background:var(--bg-alt);}
.mitglied-card h3{font-size:16px; margin-bottom:4px;}
.mitglied-rolle{font-size:13px; color:var(--ink-soft); margin:0;}

/* Spenden-Seite */
.spenden-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:36px; margin-top:40px;}
.spende-card{background:var(--paper); border:1px solid rgba(22,35,47,0.1); border-radius:8px; overflow:hidden;}
.spende-photo{aspect-ratio:4/3; background:var(--bg-alt);}
.spende-photo img{width:100%; height:100%; object-fit:cover;}
.spende-body{padding:22px 24px;}
.spende-body h3{font-size:18px; margin-bottom:10px;}
.spende-body p{font-size:14.5px; color:var(--ink-soft); margin-bottom:14px;}
.spende-body a.btn{padding:9px 18px; font-size:13.5px;}

/* Generische Seiteninhalte (Club, Was ist Kiwanis, Kontakt, Oldtimertrophy) */
.page-hero{padding:70px 0 20px;}
.page-hero h1{font-size:40px;}
.page-intro{color:var(--ink-soft); margin-top:10px; font-size:16px;}
.page-content{font-size:16px; max-width:760px;}
.page-content h2{margin:36px 0 14px; font-size:26px;}
.page-content h3{margin:26px 0 10px; font-size:19px;}
.page-content p{margin-bottom:16px;}
.page-content a{color:var(--forest); text-decoration:underline;}
.page-content .wp-block-button__link{
  display:inline-block; padding:13px 26px; border-radius:3px; font-size:14.5px; font-weight:500;
  background:var(--forest); color:var(--paper) !important; text-decoration:none;
}
.page-content ul, .page-content ol{margin:0 0 16px 20px;}

/* Footer */
footer{background:var(--forest-dark); color:#AEB9C4; padding:64px 0 32px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
footer h4{color:var(--paper); font-size:14px; font-weight:600; margin-bottom:16px; letter-spacing:0.02em;}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:9px; font-size:14px;}
footer a:hover{color:var(--gold-light);}
.foot-logo{font-family:'Fraunces',serif; color:var(--paper); font-size:17px; font-weight:600; margin-bottom:12px;}
.widget p{margin:0 0 6px; font-size:13.5px;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8894A0;
}
.foot-bottom ul{display:flex; gap:20px;}
.foot-bottom li{margin:0;}

@media (max-width:860px){
  nav{display:none;}
  .hero .wrap, .event .wrap, .mission-grid, .join .wrap, .foot-grid, .stats .wrap{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .hero-rings{display:none;}
}