/* YOH! – gemeinsames Stylesheet für index.php, admin.php, danke.php, Login */

/* Schriften lokal eingebunden (nicht von Google geladen) – vermeidet, dass
   beim Seitenaufruf die IP-Adresse der Besucher:innen an Google geht. */
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/caveat.woff2") format("woff2");}
@font-face{font-family:"Quicksand";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/quicksand.woff2") format("woff2");}
@font-face{font-family:"Nunito";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/nunito.woff2") format("woff2");}

:root{
  --bg:#eef0dc;
  --surface:#fbfbf2;
  --surface-2:#ffffff;
  --ink:#26302f;
  --ink-soft:#5a655f;
  --teal:#0c6c70;
  --teal-deep:#084f52;
  --teal-soft:#dcebe8;
  --coral:#e85a4a;
  --coral-soft:#fbe2dd;
  --accent-gold:#e0a62b;
  --accent-plum:#8d6fc9;
  --border:#cdd3bc;
  --shadow: 0 10px 30px -14px rgba(8,45,47,0.35);
  --radius-lg: 28px;
  --radius-md: 16px;
  /* Bewusst fest auf Hell gestellt: die Seite soll immer in den Flyer-Farben
     erscheinen, unabhängig vom Dunkelmodus des Geräts. */
  color-scheme: light;
}

html{scroll-behavior:smooth;}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Nunito",system-ui,sans-serif;font-size:16px;line-height:1.55;}
img{max-width:100%;}
h1,h2,h3{font-family:"Quicksand",system-ui,sans-serif;font-weight:700;margin:0 0 .4em;text-wrap:balance;color:var(--ink);}
p{margin:0 0 1em;}
a{color:var(--teal-deep);}
button{font-family:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{padding:76px 0;position:relative;scroll-margin-top:136px;}
.eyebrow{font-family:"Quicksand";font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem;color:var(--teal-deep);margin-bottom:10px;display:block;}

.banner{
  display:inline-block;font-family:"Caveat";font-weight:700;font-size:2.1rem;color:#fff;background:var(--teal);
  padding:10px 30px 16px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;transform:rotate(-1.1deg);box-shadow:var(--shadow);
}
.banner.alt{transform:rotate(1deg);}

.dots{position:absolute;z-index:-1;pointer-events:none;width:220px;height:220px;background-image:radial-gradient(var(--teal) 1.6px, transparent 1.6px);background-size:11px 11px;opacity:.3;}
.dots.tr{top:0;right:0;mask-image:radial-gradient(circle at top right, black, transparent 70%);-webkit-mask-image:radial-gradient(circle at top right, black, transparent 70%);}
.dots.bl{bottom:0;left:0;mask-image:radial-gradient(circle at bottom left, black, transparent 70%);-webkit-mask-image:radial-gradient(circle at bottom left, black, transparent 70%);}

header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.headrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 28px;max-width:1180px;margin:0 auto;}
.logo{display:block;text-decoration:none;flex-shrink:0;}
.logo-img{height:100px;width:auto;display:block;flex-shrink:0;}
nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
nav a{color:var(--ink);text-decoration:none;font-family:"Quicksand";font-weight:600;font-size:.94rem;}
nav a:hover{color:var(--teal);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin:-8px;color:var(--ink);border-radius:8px;}
.nav-toggle:hover{background:var(--teal-soft);}
.nav-toggle svg{width:26px;height:26px;display:block;}

.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:"Quicksand";font-weight:700;font-size:.95rem;padding:13px 24px;border-radius:999px;text-decoration:none;transition:transform .12s ease, box-shadow .12s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--teal-deep);}
.btn-ghost{background:transparent;color:var(--teal-deep);border:2px solid var(--teal);}
.btn-ghost:hover{background:var(--teal-soft);}
.btn-sm{padding:8px 16px;font-size:.82rem;}

/* hero */
#hero{padding-top:48px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.hero-title{font-size:2.5rem;line-height:1.12;margin:18px 0 16px;}
.hero-sub{font-size:1.08rem;color:var(--ink-soft);max-width:46ch;}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:28px;margin-top:38px;flex-wrap:wrap;}
.stat b{display:block;font-family:"Quicksand";font-size:1.5rem;color:var(--teal-deep);font-variant-numeric:tabular-nums;}
.stat span{font-size:.8rem;color:var(--ink-soft);}

/* redesigned pictogram cluster: organic, staggered, not a flat grid */
.hero-art{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;}
.badge-cluster{position:relative;width:100%;max-width:420px;aspect-ratio:1/1;}
.pic-badge{
  position:absolute;display:grid;place-items:center;box-shadow:var(--shadow);
  background:var(--surface);border:2.5px solid var(--teal-soft);
}
.pic-badge svg{color:var(--teal);}
.pic-badge.b-garten{
  width:150px;height:150px;left:0;top:6%;
  border-radius:62% 38% 55% 45%/48% 42% 58% 52%;
  transform:rotate(-7deg);
}
.pic-badge.b-garten svg{width:58px;height:58px;}
.pic-badge.b-einkaufen{
  width:112px;height:112px;right:2%;top:0;
  border-radius:40% 60% 58% 42%/55% 45% 55% 45%;
  transform:rotate(9deg);
  background:var(--teal);border-color:var(--teal);
}
.pic-badge.b-einkaufen svg{color:#fff;width:42px;height:42px;}
.pic-badge.b-haushalt{
  width:128px;height:128px;left:6%;bottom:2%;
  border-radius:48% 52% 42% 58%/58% 48% 52% 42%;
  transform:rotate(5deg);
}
.pic-badge.b-haushalt svg{width:50px;height:50px;}
.pic-badge.b-zusammenhalt{
  width:178px;height:178px;right:0;bottom:4%;
  border-radius:52% 48% 58% 42%/45% 55% 45% 55%;
  transform:rotate(-4deg);
  background:var(--surface-2);
  padding:20px;
}
.pic-badge.b-zusammenhalt img{width:100%;height:100%;object-fit:contain;}
.confetti-dot{position:absolute;border-radius:50%;opacity:.85;}
.cd1{width:14px;height:14px;background:#fff;left:40%;top:4%;}
.cd2{width:10px;height:10px;background:var(--teal);right:22%;top:42%;}
.cd3{width:12px;height:12px;background:#fff;left:4%;bottom:34%;}
.cd4{width:9px;height:9px;background:var(--teal);right:4%;bottom:32%;}

/* sanftes Schweben der Piktogramme und Konfetti-Punkte */
@media (prefers-reduced-motion: no-preference){
  .pic-badge.b-garten{animation:float-a 6s ease-in-out infinite;}
  .pic-badge.b-einkaufen{animation:float-b 7s ease-in-out infinite;animation-delay:-2.1s;}
  .pic-badge.b-haushalt{animation:float-c 6.6s ease-in-out infinite;animation-delay:-3.4s;}
  .pic-badge.b-zusammenhalt{animation:float-d 7.6s ease-in-out infinite;animation-delay:-1.2s;}
  .confetti-dot{animation:drift 5s ease-in-out infinite;}
  .cd2{animation-delay:-1.4s;}
  .cd3{animation-delay:-2.8s;}
  .cd4{animation-delay:-4.1s;}
}
@keyframes float-a{0%,100%{transform:rotate(-7deg) translateY(0);}50%{transform:rotate(-7deg) translateY(-12px);}}
@keyframes float-b{0%,100%{transform:rotate(9deg) translateY(0);}50%{transform:rotate(9deg) translateY(10px);}}
@keyframes float-c{0%,100%{transform:rotate(5deg) translateY(0);}50%{transform:rotate(5deg) translateY(-9px);}}
@keyframes float-d{0%,100%{transform:rotate(-4deg) translateY(0);}50%{transform:rotate(-4deg) translateY(11px);}}
@keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* ueber */
.ueber-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:30px;}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:var(--teal-deep);font-family:"Quicksand";font-weight:700;font-size:.82rem;padding:6px 14px;border-radius:999px;margin-bottom:10px;}
.infobox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 24px;}
.infobox h3{font-size:1.05rem;}

/* ablauf timeline */
.timeline{position:relative;margin-top:46px;}
.tl-row{display:grid;grid-template-columns:64px 1fr;gap:20px;position:relative;padding-bottom:36px;}
.tl-row:last-child{padding-bottom:0;}
.tl-dot{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;position:relative;z-index:1;box-shadow:var(--shadow);}
.tl-dot svg{width:26px;height:26px;}
.tl-row:not(:last-child)::before{content:"";position:absolute;left:27px;top:56px;bottom:-6px;width:2px;background-image:linear-gradient(var(--teal-deep) 3px, transparent 3px);background-size:2px 9px;opacity:.5;}
.tl-body h3{margin-bottom:4px;font-size:1.08rem;}
.tl-body p{color:var(--ink-soft);margin-bottom:0;max-width:60ch;}

/* board */
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 30px;align-items:center;}
.chip{border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);font-family:"Quicksand";font-weight:600;font-size:.85rem;padding:8px 16px;border-radius:999px;cursor:pointer;}
.chip.active{background:var(--teal);border-color:var(--teal);color:#fff;}
.filter-sep{width:1px;align-self:stretch;background:var(--border);margin:0 4px;}
.grid-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
.job-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:transform .15s, box-shadow .15s;}
.job-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.job-card[hidden]{display:none;}
.job-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.cat-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--teal-soft);border-radius:46% 54% 58% 42%/50% 46% 54% 50%;}
.cat-icon svg{width:22px;height:22px;color:var(--teal-deep);}
.job-card:nth-child(3n+2) .cat-icon{transform:rotate(6deg);}
.job-card:nth-child(3n+3) .cat-icon{transform:rotate(-6deg);}
.status-pill{font-family:"Quicksand";font-weight:700;font-size:.72rem;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.status-offen{background:var(--teal-soft);color:var(--teal-deep);}
.status-vergeben, .status-erledigt{background:var(--border);color:var(--ink-soft);}
.job-card h3{font-size:1.1rem;margin:2px 0 0;}
.job-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-soft);font-family:"Quicksand";font-weight:600;}
.job-meta span{display:inline-flex;align-items:center;gap:5px;}
.job-meta svg{width:14px;height:14px;}
.job-desc{color:var(--ink-soft);font-size:.92rem;flex:1;}
.urgent-tag{background:var(--coral-soft);color:var(--coral);font-family:"Quicksand";font-weight:700;font-size:.72rem;padding:3px 9px;border-radius:999px;align-self:flex-start;}
.empty-state{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--ink-soft);}
.load-more-wrap{display:flex;justify-content:center;margin-top:32px;}
.load-more-wrap .btn[hidden]{display:none;}

/* mitmachen */
.mit-card{position:relative;background:var(--teal);color:#fff;border-radius:var(--radius-lg);padding:46px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;overflow:hidden;}
.mit-card h2{color:#fff;}
.mit-card p{color:#dff1ef;}
.mit-card .btn-primary{background:#fff;color:var(--teal-deep);}
.mit-card .btn-primary:hover{background:#eafffd;}

/* footer */
footer{background:var(--surface-2);border-top:1px solid var(--border);padding:56px 0 30px;scroll-margin-top:136px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
.foot-col h4{font-family:"Quicksand";font-size:.9rem;margin-bottom:14px;color:var(--ink);}
.foot-col p, .foot-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:.9rem;margin-bottom:6px;}
.foot-col a:hover{color:var(--teal);}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--border);font-size:.8rem;color:var(--ink-soft);}
.legal-links{display:flex;gap:16px;align-items:center;}
.legal-links button{background:none;border:none;color:var(--ink-soft);text-decoration:underline;cursor:pointer;font-size:.8rem;font-family:inherit;}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(10,25,24,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:100;}
.overlay.open{display:flex;}
.modal{background:var(--surface-2);border-radius:var(--radius-lg);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:32px;position:relative;box-shadow:var(--shadow);}
.modal-close{position:absolute;top:18px;right:18px;background:var(--surface);border:1px solid var(--border);width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--ink-soft);}
.modal-close svg{width:16px;height:16px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:"Quicksand";font-weight:700;font-size:.85rem;margin-bottom:6px;}
.checkbox-label{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;}
.field .checkbox-label input[type="checkbox"]{width:18px;height:18px;flex:none;padding:0;border-radius:4px;accent-color:var(--teal);}
.field input, .field textarea, .field select{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font-family:inherit;font-size:.95rem;}
.field textarea{resize:vertical;min-height:80px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.modal-note{background:var(--teal-soft);color:var(--teal-deep);border-radius:12px;padding:12px 14px;font-size:.85rem;margin-bottom:18px;}
.form-error{background:var(--coral-soft);color:var(--coral);border-radius:12px;padding:12px 14px;font-size:.85rem;margin-bottom:14px;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* Konfetti-Moment nach erfolgreichem Absenden */
.confetti-burst{position:fixed;width:0;height:0;z-index:300;pointer-events:none;}
.confetti-burst span{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:2px;animation:confetti-fly .9s ease-out forwards;}
@keyframes confetti-fly{
  0%{transform:translate(0,0) rotate(0) scale(1);opacity:1;}
  100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4);opacity:0;}
}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:14px 22px;border-radius:12px;font-family:"Quicksand";font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* admin + login + danke (shared across admin.php, admin login screen, danke.php) */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;max-width:400px;width:100%;margin:24px;box-shadow:var(--shadow);}
.login-logo{height:auto;width:100%;max-width:230px;margin-bottom:18px;}
.danke-icon{width:90px;height:auto;margin:0 auto 10px;display:block;}
.login-error{background:var(--coral-soft);color:var(--coral);border-radius:10px;padding:10px 14px;font-size:.88rem;}
.login-hint{margin-top:18px;font-size:.88rem;}
.proto-banner{background:var(--teal-soft);color:var(--teal-deep);border-radius:12px;padding:12px 16px;font-size:.85rem;margin-bottom:24px;font-family:"Quicksand";font-weight:600;}
.flash{border-radius:12px;padding:12px 16px;font-size:.9rem;margin-top:18px;font-family:"Quicksand";font-weight:600;}
.flash-ok{background:var(--teal-soft);color:var(--teal-deep);}
.flash-error{background:var(--coral-soft);color:var(--coral);}
.form-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;max-width:640px;}
.admin-job{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:14px;}
.admin-job-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.admin-job-head h3{margin:0;font-size:1.02rem;}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.inline-form{display:inline-flex;margin:0;}
select.inline{padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--ink);font-family:"Quicksand";font-weight:600;font-size:.8rem;}

@media (max-width:860px){
  .hero-grid, .ueber-grid, .mit-card, .foot-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;min-height:300px;}
  .badge-cluster{max-width:300px;}
  section{padding:52px 0;}
  .hero-title{font-size:2rem;}
  .field-row{grid-template-columns:1fr;}
  .logo-img{height:56px;}
  section, footer{scroll-margin-top:85px;}

  .site-nav{
    display:none;
    position:fixed;
    top:85px;
    left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
    padding:6px 28px 14px;
    z-index:39;
    max-height:calc(100vh - 85px);
    overflow-y:auto;
  }
  .site-nav.open{display:flex;}
  .site-nav a{padding:13px 0;border-bottom:1px solid var(--border);}
  .site-nav a:last-child{border-bottom:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
}