/* =================================================================
   Spendenkampagne „20 € für den Breetzer Wald“
   Ergänzt css/style.css – wird NACH style.css eingebunden.
   ================================================================= */

/* Plakatschrift: Anton (SIL Open Font License), selbst gehostet.
   Datei(en) in /fonts/ ablegen. Ohne Datei greift Impact bzw. eine fette Systemschrift. */
@font-face{
  font-family:"Anton";
  src:url("../fonts/Anton-Regular.woff2") format("woff2"),
      url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight:100 900;   /* Anton hat nur einen Schnitt – so wird er nie künstlich verfettet */
  font-style:normal;
  font-display:swap;
}

:root{
  /* Fallbacks: Windows/Mac (Impact), Android (sans-serif-condensed), Linux (Liberation Sans Narrow) */
  --k-plakat:"Anton","Impact","Haettenschweiler","Arial Narrow","Liberation Sans Narrow","sans-serif-condensed","Roboto Condensed",sans-serif;
  --k-tanne:#0f3d24;        /* dunkles Waldgrün der Plakatschrift */
  --k-rot:#d7141a;          /* Signalrot aus Banner und Flyer */
  --k-rot-dunkel:#b30f14;
  --k-papier:#ffffff;
}

.k-svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* Kleinigkeiten aus index.php */
.text-gruen{ color:#247E37; }

/* ---------------------------------------------------------------
   Navigation auf dem Handy (vorher lief sie über den Rand hinaus)
   --------------------------------------------------------------- */
@media (max-width: 760px){
  .topbar-inner{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    min-height:0;
    padding:10px 0 6px;
  }
  .brand{ white-space:normal; }
  .nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -12px;
    padding:0 12px 4px;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{
    white-space:nowrap;
    padding:8px 12px;
  }
}

/* ---------------------------------------------------------------
   Vorschau-Leiste
   --------------------------------------------------------------- */
.k-vorschau-leiste{
  background:#fff5dc;
  border-bottom:1px solid #eed79c;
  color:#7a4f00;
  font-weight:700;
  font-size:.92rem;
  text-align:center;
  padding:8px 12px;
}
.k-vorschau-leiste code{
  background:rgba(0,0,0,.06);
  padding:1px 5px;
  border-radius:4px;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.k-hero{
  position:relative;
  overflow:hidden;
  /* Eigenes Foto: bilder/kampagne_hero.jpg (ca. 2400 × 900 px).
     Fehlt es, bleibt der gemalte Himmel-über-Wald-Verlauf darunter sichtbar. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(8,40,20,.35) 100%),
    url("../bilder/kampagne_hero.jpg") center 60% / cover no-repeat,
    linear-gradient(180deg, #4f8fd6 0%, #9cc7ee 38%, #cfe3cf 46%, #4f8a3e 52%, #2b5f2c 75%, #1c4422 100%);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.k-hero-inner{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  min-height:clamp(320px, 34vw, 440px);
  padding:clamp(22px, 4vw, 44px) 0 clamp(26px, 4vw, 48px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:clamp(18px, 3vw, 40px);
}

.k-hero-claim{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(6px, 1.2vw, 14px);
}

.k-claim{
  margin:30;
  line-height:1;
}

/* Weißes Feld mit gerissener Pinselkante */
.k-brush{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  font-family:var(--k-plakat);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.005em;
  transform:rotate(-3.5deg);
}
.k-brush::before{
  content:"";
  position:absolute;
  inset:-.18em -.5em;
  background:var(--k-papier);
  filter:url(#k-pinsel) drop-shadow(0 6px 14px rgba(0,0,0,.18));
  z-index:-1;
}

.k-brush-gross{
  align-items:center;
  gap:.18em;
  padding:.06em .1em;
}
.k-zahl{
  color:var(--k-tanne);
  font-size:clamp(4.2rem, 10vw, 8.6rem);
  line-height:.86;
  letter-spacing:-.02em;
}
.k-claim-rechts{
  display:flex;
  flex-direction:column;
  line-height:.92;
}
.k-fuer{
  color:var(--k-tanne);
  font-size:clamp(1.7rem, 4vw, 3.5rem);
}
.k-claim-rechts .k-rot{
	
	/* „Breetzer Wald“ immer in einer Zeile: Die Schriftgröße richtet sich
	   nach der tatsächlich verfügbaren Breite der Claim-Spalte. */
	.k-claim-rechts .k-rot{ white-space:nowrap; }

	@supports (container-type: inline-size){
	  .k-hero-claim{
		container-type:inline-size;
		width:100%;
	  }
	  .k-zahl{ font-size:min(8.6rem, 15.5cqi); }
	  .k-fuer{ font-size:min(3.5rem, 6.4cqi); }
	  .k-claim-rechts .k-rot{ font-size:min(4.4rem, 7.8cqi); }
	}	
	
	
  font-size:clamp(2.1rem, 5vw, 4.4rem);
}
.k-rot{ color:var(--k-rot); }
.k-dunkel{ color:var(--k-tanne); }

.k-brush-unter{
  margin:0 0 0 clamp(18px, 6vw, 110px);
  flex-direction:column;
  font-size:clamp(1.15rem, 2.5vw, 2.1rem);
  line-height:1.05;
  padding:.1em .2em;
  transform:rotate(-2.5deg);
}

/* Großer Spendenbutton */
.k-hero-btn{
  display:inline-flex;
  align-items:center;
  gap:clamp(10px, 1.4vw, 18px);
  padding:clamp(10px, 1.2vw, 16px) clamp(12px, 1.4vw, 18px) clamp(10px, 1.2vw, 16px) clamp(18px, 2vw, 28px);
  border:5px solid #fff;
  border-radius:26px;
  background:linear-gradient(180deg, #34a84a 0%, #237a35 100%);
  color:#fff;
  position:relative;
  z-index:1;
  font-family:var(--k-plakat);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.5rem, 3vw, 2.7rem);
  line-height:1;
  box-shadow:0 14px 30px rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.14);
  transition:transform .15s ease, box-shadow .15s ease;
}
.k-hero-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.16);
}
.k-hero-btn:focus-visible{
  outline:4px solid var(--k-rot);
  outline-offset:4px;
}
.k-btn-herz{
  width:1.1em;
  height:1.1em;
  fill:#fff;
  flex:0 0 auto;
}
.k-btn-trenner{
  width:3px;
  align-self:stretch;
  margin:.05em 0;
  background:rgba(255,255,255,.85);
  border-radius:2px;
}
.k-btn-text{ white-space:nowrap; }
.k-btn-pfeil{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.55em;
  height:1.55em;
  border-radius:50%;
  background:var(--k-rot);
  flex:0 0 auto;
}
.k-btn-pfeil svg{
  width:.9em;
  height:.9em;
  fill:none;
  stroke:#fff;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.k-hero-btn{ align-self:end; }

@media (max-width: 1100px){
  .k-hero-inner{
    grid-template-columns:1fr;
    justify-items:start;
  }
  .k-hero-btn{
    justify-self:stretch;
    justify-content:center;
    margin-top:6px;
  }
}

/* ---------------------------------------------------------------
   Spendenbox
   --------------------------------------------------------------- */
.k-spendenbox{
  border-top:6px solid var(--blue);
  scroll-margin-top:120px;
}
.k-von{
  font-size:.95rem;
  font-weight:700;
  color:var(--muted);
}
.k-stand-hinweis{
  margin:8px 0 0;
  font-size:.9rem;
  color:var(--muted);
}

.k-qr{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.k-qr img{
  width:200px;
  height:auto;
  background:#fff;
  padding:10px;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
  image-rendering:pixelated;   /* QR-Kanten bleiben scharf */
}
.k-qr-hinweis{
  margin:0;
  font-size:.9rem;
  color:#49606e;
  text-align:center;
}

.k-konto{
  margin:16px 0 0;
  display:grid;
  gap:8px;
}
.k-konto-zeile{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 12px;
  background:#fff;
}
.k-konto dt{
  font-size:.8rem;
  font-weight:800;
  color:var(--muted);
}
.k-konto dd{
  margin:2px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  font-weight:700;
  color:var(--text);
  overflow-wrap:anywhere;
}
.k-wert{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.k-copy{
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  color:var(--green);
  background:var(--blue-soft);
  border:1px solid #cfe8d6;
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
}
.k-copy:hover{ background:#dff2e5; }
.k-copy:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.k-copy.ist-kopiert{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.k-link{
  color:var(--blue-dark);
  font-weight:800;
  text-decoration:underline;
}
.k-mehr-btn{ margin-top:14px; }

/* Auf klage.php ist die Spendenbox höher als ein Laptop-Bildschirm – dort nicht „kleben“ lassen */
.sidebar.k-sidebar-frei{ position:static; }

/* ---------------------------------------------------------------
   Kampagnenseite klage.php
   --------------------------------------------------------------- */
.k-card-abstand{ margin-top:18px; }

.k-kernsatz{
  font-size:1.1rem;
  font-weight:700;
  color:var(--green);
}

/* Zeitleiste – echte Abfolge, daher mit Datum als Marker */
.k-zeitleiste{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  position:relative;
}
.k-zeitleiste::before{
  content:"";
  position:absolute;
  left:7px;
  top:6px;
  bottom:6px;
  width:2px;
  background:#cfe3d5;
}
.k-zeitleiste li{
  position:relative;
  padding:0 0 14px 30px;
}
.k-zeitleiste li::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--blue);
}
.k-zeit-datum{
  display:block;
  font-weight:800;
  font-size:.92rem;
  color:var(--green);
}
.k-zeit-text{ color:#44535d; }
.k-zeitleiste li.ist-jetzt::before{
  background:var(--blue);
  box-shadow:0 0 0 5px rgba(47,158,68,.18);
}
.k-zeitleiste li.ist-frist::before{
  border-color:var(--k-rot);
  background:var(--k-rot);
}
.k-zeitleiste li.ist-frist .k-zeit-datum{ color:var(--k-rot-dunkel); }

/* Fakten aus dem Bescheid */
.k-fakt-zahl{
  display:block;
  font-family:var(--k-plakat);
  font-weight:900;
  font-size:2.1rem;
  line-height:1.05;
  color:var(--k-tanne);
  margin-bottom:4px;
}

/* Argumente */
.k-argumente{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.k-argumente li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#f9fdfb;
}
.k-argumente h3{
  margin:0 0 4px;
  font-size:1.05rem;
}
.k-argumente p{
  margin:0;
  color:#44535d;
}
.k-entwurf{
  display:inline-block;
  margin-left:8px;
  padding:2px 10px;
  border-radius:999px;
  background:#fff1f0;
  border:1px solid #f3c3bf;
  color:#b42318;
  font-size:.8rem;
  font-weight:800;
  vertical-align:middle;
}

/* Fragen und Antworten */
.k-faq details{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  margin-top:10px;
}
.k-faq summary{
  cursor:pointer;
  padding:12px 14px;
  font-weight:800;
  list-style-position:inside;
}
.k-faq summary:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:12px; }
.k-faq details[open] summary{ border-bottom:1px solid var(--line); }
.k-faq .k-faq-antwort{
  padding:10px 14px 12px;
  color:#44535d;
}
.k-faq .k-faq-antwort p{ margin:0 0 8px; }
.k-faq .k-faq-antwort p:last-child{ margin-bottom:0; }

/* Mobil: Sprungbutton zur Spendenbox (die steht dort unten) */
.k-nur-mobil{ display:none; }
@media (max-width: 980px){
  .k-nur-mobil{ display:flex; }
}

/* ---------------------------------------------------------------
   Bewegung reduzieren, wenn gewünscht
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .spendenziel-figure,
  .spendenziel-fill::after,
  .fig-arm-left, .fig-arm-right, .fig-leg-left, .fig-leg-right{
    animation:none !important;
  }
  .spendenziel-figure{ left:auto; right:4px; }
  .k-hero-btn, .k-hero-btn:hover{ transition:none; transform:none; }
}