/* ═══════════════════════════════════════════════════════════════════════
   Social Impact: Petitionen und Teddyklinik (Andreas 10.10.2026)
   Grundordnung aus design.css: Abstände 4er-Raster, Radien 6/10/14/20,
   Pille nur für Knöpfe und Statusmarken. Inhalte stehen direkt vor dem
   Hintergrund; Flächen gibt es nur für das Logo (braucht hellen Grund) und
   das Spendenband (Farbfläche über die volle Breite). Keine Karte in Karte.
   ═══════════════════════════════════════════════════════════════════════ */

.si-wurzel{--si-gold:#e8c552;--si-gruen:#5fbf8a;--si-rot:#e5484d;}
.si-wurzel .atmed-linie{display:block;max-width:220px;}
.si-kopf{max-width:780px;margin:0 0 var(--at-ab-3xl,48px);}
.si-kopf .s-sub{max-width:68ch;}

.si-rubrik{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--si-gold);margin:0 0 var(--at-ab-s,8px);}
.si-h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--t-hi);margin:0 0 var(--at-ab-m,12px);}
.si-h2--gross{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;}
.si-fliess{color:var(--t-mid);font-size:var(--at-s-m,17px);line-height:1.7;margin:0 0 var(--at-ab-l,16px);max-width:66ch;}
.si-vorspann{color:var(--t-hi);font-family:var(--font-heading,'Source Serif 4',Georgia,serif);font-size:clamp(19px,2.1vw,22px);line-height:1.5;margin:0 0 var(--at-ab-l,16px);max-width:40ch;}
.si-knoepfe{display:flex;flex-wrap:wrap;gap:var(--at-ab-m,12px);margin:var(--at-ab-xl,24px) 0 var(--at-ab-l,16px);}
.si-knoepfe .atmed-btn svg,.si-teil-link svg,.si-weiter svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.si-hinweis{color:var(--t-lo);font-size:var(--at-s-xs,13px);line-height:1.6;margin:0;max-width:62ch;}

/* ── Petitionen ─────────────────────────────────────────────────────── */
.si-petition{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--at-ab-2xl,32px);align-items:center;
  padding:var(--at-ab-2xl,32px) 0 var(--at-ab-3xl,48px);border-top:1px solid var(--border);scroll-margin-top:calc(var(--nav-h,72px) + 24px);}
.si-petition-bild{margin:0;max-width:300px;justify-self:center;width:100%;}
.si-petition-bild img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--at-radius-l,20px);
  box-shadow:var(--at-schatten-3,0 18px 42px -14px rgba(0,0,0,.6));}
@media (min-width:760px){
  .si-petition{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:var(--at-ab-4xl,64px);}
  .si-petition-bild{justify-self:start;max-width:360px;}
}
@media (min-width:1200px){
  .si-petition{grid-template-columns:360px minmax(0,1fr);}
}

/* Weiterführende Verweise: Haarlinien, kein Kasten */
.si-weiter{display:grid;grid-template-columns:minmax(0,1fr);margin:var(--at-ab-2xl,32px) 0 0;border-top:1px solid var(--border);}
@media (min-width:760px){ .si-weiter{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--at-ab-3xl,48px);} }
@media (min-width:1024px){ .si-weiter--drei{grid-template-columns:repeat(3,minmax(0,1fr));} }
.si-weiter a{position:relative;display:flex;flex-direction:column;gap:4px;padding:var(--at-ab-l,16px) 36px var(--at-ab-l,16px) 0;
  border-bottom:1px solid var(--border);text-decoration:none;color:inherit;min-height:var(--at-hoehe,44px);}
.si-weiter a svg{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--acc,#5b82c4);transition:transform var(--at-dur,.22s) var(--at-ease,ease);}
.si-weiter-titel{color:var(--t-hi);font-size:var(--at-s-m,17px);font-weight:650;}
.si-weiter-zeile{color:var(--t-lo);font-size:14px;line-height:1.5;}
.si-weiter a:hover .si-weiter-titel,.si-weiter a:focus-visible .si-weiter-titel{color:var(--at-acc-1,#6b93d6);}
.si-weiter a:hover svg,.si-weiter a:focus-visible svg{transform:translate(4px,-50%);}

/* ── Teddyklinik: Kopf ──────────────────────────────────────────────── */
.si-teddy-kopf{max-width:820px;margin:0 0 var(--at-ab-4xl,64px);}
.si-logo{display:inline-block;margin:0 0 var(--at-ab-2xl,32px);padding:clamp(12px,2vw,18px) clamp(16px,2.6vw,26px);
  background:#fefefe;border-radius:var(--at-radius-m,14px);box-shadow:var(--at-schatten-2,0 6px 18px -6px rgba(0,0,0,.45));
  transition:transform var(--at-dur,.22s) var(--at-ease,ease),box-shadow var(--at-dur,.22s) var(--at-ease,ease);}
.si-logo img{display:block;width:clamp(240px,40vw,420px);height:auto;}
.si-logo:hover,.si-logo:focus-visible{transform:translateY(-2px);box-shadow:var(--at-schatten-3,0 18px 42px -14px rgba(0,0,0,.6));outline:none;}
.si-logo:focus-visible{box-shadow:var(--at-schatten-2),var(--at-fokus,0 0 0 3px rgba(91,130,196,.35));}
.si-lead{color:var(--t-mid);font-family:var(--font-heading,'Source Serif 4',Georgia,serif);font-size:clamp(19px,2.2vw,24px);line-height:1.55;margin:var(--at-ab-m,12px) 0 0;max-width:46ch;}

/* Zwei Spalten Text, getrennt durch eine senkrechte Haarlinie */
.si-zwei{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--at-ab-2xl,32px);padding:var(--at-ab-2xl,32px) 0;border-top:1px solid var(--border);margin:0 0 var(--at-ab-4xl,64px);}
@media (min-width:900px){
  .si-zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
  .si-zwei>div:first-child{padding-right:var(--at-ab-3xl,48px);}
  .si-zwei>div+div{padding-left:var(--at-ab-3xl,48px);border-left:1px solid var(--border);}
}
.si-zwei .si-fliess:last-child{margin-bottom:0;}

/* ── Bestandteile: nummerierte Liste mit Haarlinien ─────────────────── */
.si-teile-kopf{margin:0 0 var(--at-ab-xl,24px);}
.si-teile{list-style:none;margin:0 0 var(--at-ab-4xl,64px);padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--at-ab-3xl,48px);counter-reset:none;}
@media (min-width:900px){ .si-teile{grid-template-columns:repeat(2,minmax(0,1fr));} }
.si-teil{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--at-ab-l,16px);padding:var(--at-ab-xl,24px) 0;border-top:1px solid var(--border);}
.si-teil-nr{font-family:var(--font-heading,'Source Serif 4',Georgia,serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1;
  min-width:2ch;background:var(--at-verlauf-akzent,linear-gradient(180deg,#6b93d6,#46689f));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;padding-top:2px;}
.si-teil-titel{margin:0 0 var(--at-ab-s,8px);color:var(--t-hi);font-size:clamp(17px,1.8vw,20px);font-weight:700;line-height:1.35;}
.si-teil-text{margin:0 0 var(--at-ab-m,12px);color:var(--t-mid);font-size:var(--at-s-s,15px);line-height:1.7;max-width:60ch;}
.si-teil-link{display:inline-flex;align-items:center;gap:var(--at-ab-s,8px);min-height:var(--at-hoehe-s,36px);color:var(--at-acc-1,#6b93d6);font-size:var(--at-s-s,15px);font-weight:600;text-decoration:none;}
.si-teil-link:hover,.si-teil-link:focus-visible{color:var(--t-hi);}
.si-teil-link:hover svg,.si-teil-link:focus-visible svg{transform:translateX(3px);}
.si-teil-link svg{transition:transform var(--at-dur,.22s) var(--at-ease,ease);}

.si-status{display:inline-block;margin-left:6px;font-family:var(--font,system-ui,sans-serif);padding:2px 9px;border-radius:var(--at-pill,999px);font-size:11.5px;font-weight:600;letter-spacing:.02em;
  vertical-align:3px;white-space:nowrap;border:1px solid var(--border);color:var(--t-lo);}
.si-status--an{border-color:rgba(95,191,138,.45);color:var(--si-gruen);background:rgba(95,191,138,.08);}
.si-status--arbeit{border-color:rgba(232,197,82,.42);color:var(--si-gold);background:rgba(232,197,82,.07);}

/* ── Spendenband: Farbfläche über die volle Breite ──────────────────── */
.si-band{margin:0 calc(-1 * var(--px));padding:clamp(40px,6vw,72px) var(--px);
  background:linear-gradient(135deg,rgba(70,104,159,.30),rgba(27,30,49,.55) 55%,rgba(232,197,82,.08));
  border-top:1px solid rgba(107,147,214,.28);border-bottom:1px solid rgba(107,147,214,.18);}
.si-band-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--at-ab-2xl,32px);align-items:start;}
@media (min-width:980px){ .si-band-innen{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--at-ab-4xl,64px);} }
.si-band .si-knoepfe{margin-bottom:0;}
.si-zuwendung{margin:0;display:grid;gap:0;}
.si-zuwendung div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:var(--at-ab-m,12px) 0;border-top:1px solid rgba(255,255,255,.10);}
.si-zuwendung div:last-child{border-bottom:1px solid rgba(255,255,255,.10);}
@media (min-width:560px){ .si-zuwendung div{grid-template-columns:130px minmax(0,1fr);gap:var(--at-ab-l,16px);} }
.si-zuwendung dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-lo);padding-top:3px;}
.si-zuwendung dd{margin:0;color:var(--t-hi);font-size:var(--at-s-s,15px);line-height:1.6;}
.si-zuwendung a{color:var(--at-acc-1,#6b93d6);}

.si-mitmachen{padding:clamp(48px,6vw,72px) 0 96px;}
.si-mitmachen .si-weiter{margin-top:var(--at-ab-m,12px);}

@media (prefers-reduced-motion:reduce){
  .si-logo,.si-weiter a svg,.si-teil-link svg{transition:none;}
  .si-logo:hover{transform:none;}
}