/* /css/funding.css – Funding Graph (clean, single source of truth) */


/* X-Achse: ohne Beschriftung/Ticks, wie Y-Achse */
:root { 
	--x-axis-overlap: 0px;
	  /* Farb Tweaks */
	--current-bar-border: #b7424d;
		} /* ggf. 2px, wenn die Linie leicht unter die Y-Achse laufen soll */

.funding-widget{
  /* Theme */
  --axis-color:#8b8f89;
  --tick-color:#000;
  --label-color:#575757;
  --bg:transparent;
  --goal-stroke:#83a03a;
  --funding-color:#ffff74;
  --goal-alpha: .3;

  /* Layout-Tweaks */
  --axis-col:72px;         /* Breite der Y-Achsen-Spalte (Desktop) */
  --goal-bar-w:40%;        /* Breite des Zielbalkens */
  --current-bar-w:40%;     /* Breite des IST-Balkens */
  --current-offset:6%;     /* Abstand IST-Balken von rechts */

  /* Exakte Achsen-/Label-Abstände */
  --axis-line:6px;         /* Dicke der Y-Achse */
  --label-gap:50px;         /* Abstand Label -> rechts über die Achsenlinie hinaus */
  
  background:var(--bg);
  border:1px solid #e3e3e3;
  border-radius:16px;
  padding:16px 16px 10px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  max-width:560px;
}

/* Widget Integration */

/* Abstand direkt zum Widget */
.funding-lead + .funding-widget,
.funding-lead + .funding { margin-top: 0.5rem; }


/* Header */
.funding-header{
  display:flex;
  align-items: baseline;
  gap:12px;
  margin-bottom:20px;
  justify-content:center;   /* NEU: Inhalte horizontal zentrieren */
  text-align:center;        /* kann bleiben */
}

.funding-header .title,
.funding-header .sub {
  flex: 0 0 auto;
  font-weight: 700; /* fett */
  font-size: 0.95rem;
}

/* Graphfläche – festes Seitenverhältnis 25:36 (≈250×360) */
.funding-graph{
  position:relative;
  display:grid;
  grid-template-columns: var(--axis-col) 1fr;
  gap:0;                              /* WICHTIG: kein zusätzlicher Spalt zur Bars-Spalte */
  width:100%;
  max-width:250px;
  aspect-ratio:25 / 36;
  height:auto;
  margin:6px auto 2px;
}

.funding-graph::after{
  content:"";
  position:absolute;
  bottom:0;
  left: calc(var(--axis-col) - var(--x-axis-overlap)); /* Start genau an der Y-Achse */
  right: 0;                                            /* bis ganz rechts */
  height: var(--axis-line);                            /* gleiche Dicke wie Y */
  background: var(--axis-color);                       /* gleiche Farbe wie Y */
  z-index: 0;
}

/* Y-Achse schlank & „klebend“ */
.y-axis{
  position:relative;
  padding-right:0;
  border-right: var(--axis-line) solid var(--axis-color);   /* dünne, echte Linie */
}
.y-axis .tick{
  position:absolute;
  inset-inline:0 auto;
  bottom:var(--y);
  transform:translateY(50%);
  height:2px;
}

.y-axis .tick .line{
  right: -8;                /* genau am Innenrand der Achsenspalte */
  width: 12px;              /* Länge nach Geschmack (z.B. 6–10px) */
  height: 6px;
  background: var(--tick-color);
  top: -1px;
}

.y-axis .tick .label{
  position:absolute;
  left:auto;
  right: calc(-1 * (var(--axis-line) + var(--label-gap)));  /* Label 2px über die Linie ziehen */
  transform:translateY(-8px);
  white-space:nowrap;
  line-height:1;
  font-size:.9rem;
  color:var(--label-color);
}

.y-axis .tick .line{ right: 0; z-index: 2; }
.y-axis .tick .label{ z-index: 1; } /* nur wenn nötig */



/* Bars */
.bars{ position:relative; display:flex; align-items:flex-end; justify-content:center; }
.bar{
  position:absolute; border-radius:18px;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:visible; /* Labels dürfen „raus“ */
}

/* Zielbalken mittig, schlank, ohne „Deckel“ */
.bar.goal{
  left:36%;
  bottom: 6px;
  transform:translateX(-50%);
  width:var(--goal-bar-w);
  background:linear-gradient(#eaeaea,#dcdcdc);
  border:2px solid var(--goal-stroke);
  height:100%; z-index:1;
  
    background: linear-gradient(
    rgb(234 234 234 / var(--goal-alpha)),
    rgb(220 220 220 / var(--goal-alpha))
  );
  border: 2px solid rgb(131 160 58 / var(--goal-alpha)); /* #83a03a mit Alpha */
}

/* IST-Balken schmaler, leicht nach rechts versetzt */
.bar.current{
  width:var(--current-bar-w);
  right:var(--current-offset);
  left:68px;
  bottom: 6px;
  background:var(--funding-color);
  height:0%; z-index:2;
  transition:height 1200ms cubic-bezier(.2,.75,.25,1.05), background-color 300ms ease;
  border: 2px solid var(--current-bar-border, #808080);
}
.funding-widget.funding-active .bar.current{ height:var(--funding-percent,0%); }

/* Labels – schwebend direkt am Balken */
.bar .bar-label{
  position:absolute; font-weight:800; font-size:1.05rem;
  background:rgba(255,255,255,.88);
  padding:2px 8px; border-radius:10px; white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.bar.goal .bar-label{ top:-24px; left:50%; transform:translateX(-50%); color:#3a2f1c; }
.bar.current .bar-label{ bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); color:#7b4a45; }

/* Footer */
.funding-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:10px; color:#666; font-size:.95rem;
  text-align: left;
}
.funding-footer .legend .dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-inline:6px 4px; vertical-align:middle;
}

/* Responsive */
@media (max-width:520px){
  .funding-graph{ max-width:100%; --axis-col:64px; }
  .bar .bar-label{ font-size:1rem; }
}

/* Admin-Hilfsstyles (kann in eure admin.css verschoben werden) */
.admin-funding .grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.admin-funding .card{ border:1px solid #e2e2e2; border-radius:12px; padding:14px; background:#fff; }
.admin-funding .row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.admin-funding label{ min-width:140px; font-weight:600; }
.admin-funding input[type=text]{ padding:9px 10px; border:1px solid #ccc; border-radius:8px; width:220px; }
.admin-funding button{ padding:10px 14px; border-radius:10px; border:0; background:#2f6fed; color:#fff; font-weight:700; cursor:pointer; }
.admin-funding .notice{ background:#f3f7ff; border:1px solid #cddfff; padding:10px 12px; border-radius:8px; margin:0 0 12px 0; }
.admin-funding .help{ color:#666; font-size:.95rem; }

/* ===== Admin-Layout-Hülle für Funding (greift nur auf dieser Seite) ===== */

/* Zwei-Spalten-Grid ab Desktop */
.funding-admin{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 18px;                  /* passt zur admin-card */
}

/* Blöcke sauber aussehen lassen, ohne das Widget selbst zu verändern */
.funding-form,
.funding-preview{
  padding: 2px;
}

/* Typo angleichen (überschreibt nichts im Widget selbst) */
.funding-form h2,
.funding-preview h2{
  margin: 0 0 .5rem;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem);
  line-height: 1.25;
}

/* Mobile: Eingaben oben, Widget darunter – volle Breite */
@media (max-width: 900px){
  .funding-admin{
    grid-template-columns: 1fr;
  }
  .funding-form{ order: 1; }
  .funding-preview{ order: 2; }
}

/* Kleinere Geräte: Inputs komfortabel */
@media (max-width: 600px){
  .funding-form .inp,
  .funding-form input[type="text"],
  .funding-form input[type="number"]{
    font-size: 1rem;
    padding: 10px 12px;
  }
}

/* Optional: der „Speichern“-Button im Admin-Look (Farben kommen aus default.css) */
.funding-form .btn{ margin-top: 8px; }


/* Zweispaltige, kompakte Eingabefelder (Admin Funding) */
.funding-fields{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px 14px;
  align-items: end;
  max-width: 520px;            /* hält die Inputs angenehm kurz */
  margin-bottom: 10px;
}
.funding-fields .field .lbl{ margin:0 0 4px; }
.funding-fields .inp{
  width:100%;
  padding:10px 12px;           /* reduziertes Padding */
  font-size: 1rem;
}

@media (max-width: 340px){
  .funding-fields{ grid-template-columns: 1fr; }
}


/* Graphfläche */
.funding-widget .funding-graph{
  position:relative;
  display:grid;
  grid-template-columns: var(--axis-col) 1fr;
  gap:0;
  width:100%;
  max-width:250px;
  aspect-ratio:25 / 36;
  height:auto;
  margin:6px auto 2px;
}

.funding-widget .funding-graph::after{
  content:"";
  position:absolute;
  bottom:0;
  left: calc(var(--axis-col) - var(--x-axis-overlap));
  right: 0;
  height: var(--axis-line);
  background: var(--axis-color);
  z-index: 0;
}

/* Y-Achse */
.funding-widget .y-axis{
  position:relative;
  padding-right:0;
  border-right: var(--axis-line) solid var(--axis-color);
}

.funding-widget .y-axis .tick{
  position:absolute;
  inset-inline:0 auto;
  bottom:var(--y);
  transform:translateY(50%);
  height:2px;
}

.funding-widget .y-axis .tick .line{
  right: 0;                 /* <- vorher stand irgendwo "right: -8;" */
  width: 12px;
  height: 6px;
  background: var(--tick-color);
  top: -1px;
}

.funding-widget .y-axis .tick .label{
  position:absolute;
  left:auto;
  right: calc(-1 * (var(--axis-line) + var(--label-gap)));
  transform:translateY(-8px);
  white-space:nowrap;
  line-height:1;
  font-size:.9rem;
  color:var(--label-color);
}

/* Bars */
.funding-widget .bars{ 
  position:relative; 
  display:flex; 
  align-items:flex-end; 
  justify-content:center; 
}

.funding-widget .bar{
  position:absolute;
  border-radius:18px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:visible;
}

.funding-widget .bar.goal{
  left:36%;
  bottom: 6px;
  transform:translateX(-50%);
  width:var(--goal-bar-w);
  background:linear-gradient(#eaeaea,#dcdcdc);
  border:2px solid var(--goal-stroke);
  height:100%;
  z-index:1;
  background: linear-gradient(
    rgb(234 234 234 / var(--goal-alpha)),
    rgb(220 220 220 / var(--goal-alpha))
  );
  border: 2px solid rgb(131 160 58 / var(--goal-alpha));
}

.funding-widget .bar.current{
  width:var(--current-bar-w);
  right:var(--current-offset);
  left:68px;
  bottom: 6px;
  background:var(--funding-color);
  height:0%;
  z-index:2;
  transition:height 1200ms cubic-bezier(.2,.75,.25,1.05), background-color 300ms ease;
  border: 2px solid var(--current-bar-border, #808080);
}

.funding-widget.funding-active .bar.current{ height:var(--funding-percent,0%); }

/* Labels */
.funding-widget .bar .bar-label{
  position:absolute;
  font-weight:800;
  font-size:1.05rem;
  background:rgba(255,255,255,.20);
  padding:2px 8px;
  border-radius:10px;
  white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  text-align: center;
}

.funding-widget .bar.goal .bar-label{ display:none; }
/*
.funding-widget .bar.goal .bar-label{ top:-24px; left:50%; transform:translateX(-50%); color:#3a2f1c; }
.funding-widget .bar.current .bar-label{ bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); color:#7b4a45; }
*/

/* Footer */
.funding-widget .funding-footer{ … }
.funding-widget .funding-footer .legend .dot{ … }

/* Responsive */
@media (max-width:520px){
  .funding-widget .funding-graph{ max-width:100%; --axis-col:64px; }
  .funding-widget .bar .bar-label{ font-size:1rem; }
}