/* ===============================
   Schlossberginstitut – Förderungen (nur Artikel ID 27)
   =============================== */

/* Wrapper + Farb-/Typo-Variablen */
.funding-page{
  --brand:#d60525;      /* Rot */
  --brand-2:#fbb7a5;    /* Rosa */
  --ink:#111; --muted:#555; --line:#e8e8e8; --bg:#fff; --badge:#f2f4f7; /* Badge: dezentes Grau */
  font:11pt/1.65 Verdana, Geneva, sans-serif;
  color:var(--ink);
  background:transparent;            /* kein Hellgrau hinter der Seite */
  max-width:1100px; margin:0 auto; padding:24px;
}

/* ---------- Trust-Leiste: robust & mobilfreundlich ---------- */
.funding-page .trustbar{
  display:grid;
  grid-template-columns:160px 160px 1fr;
  gap:12px 16px;
  align-items:center;
  margin-bottom:20px;
}
.funding-page .trustbar img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  background:#fff;
  justify-self:start;
}
.funding-page .trustcopy{min-width:0;}
.funding-page .trustcopy h1{font-size:28px; line-height:1.2; margin:.2rem 0;}
.funding-page .trustcopy p{margin:0; color:var(--muted);}

/* Breakpoint 1: zwei Spalten (Logo + Text) */
@media (max-width: 900px){
  .funding-page .trustbar{ grid-template-columns:140px 1fr; }
}

/* Breakpoint 2: eine Spalte (zentriert, kompakt) */
@media (max-width: 640px){
  .funding-page .trustbar{
    grid-template-columns:1fr;
    text-align:center;
    gap:10px 12px;
  }
  .funding-page .trustbar img{
    justify-self:center;
    max-width:130px;
  }
  .funding-page .trustcopy h1{font-size:22px;}
  .funding-page .trustcopy p{font-size:14px;}
}

/* ---------- CTA/Buttons ---------- */
.funding-page .card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:background .2s,box-shadow .2s,transform .2s}
.funding-page .card:hover{background:linear-gradient(0deg, rgba(251,183,165,.14), rgba(251,183,165,.14)), var(--bg);box-shadow:0 6px 16px rgba(0,0,0,.08);transform:translateY(-1px)}
.funding-page .card--cta{border-left:4px solid var(--brand);padding:18px}

.funding-page .btn{
  display:inline-block;padding:12px 16px;border-radius:10px;
  background:var(--brand);color:#fff;text-decoration:none;
  font-weight:600;line-height:1;border:none
}
.funding-page .btn:hover{opacity:.92}
.funding-page .btn--secondary{background:var(--brand-2);color:#fff}
.funding-page .btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ---------- Sticky TOC – mobil scrollbar ---------- */
.funding-page .toc{position:sticky;top:0;z-index:5;background:#fff;padding:8px 0;display:flex;gap:8px 12px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.funding-page .toc a{font-size:14px;color:var(--brand);text-decoration:none;padding:8px 10px;border-radius:999px;white-space:nowrap}
.funding-page .toc a:hover{background:var(--brand-2)}
.funding-page .toc::-webkit-scrollbar{height:6px}.funding-page .toc::-webkit-scrollbar-thumb{background:#ddd;border-radius:6px}

/* ---------- Abschnitte / Badges / Listen ---------- */
.funding-page .section{margin:24px 0}
.funding-page .section > h2{margin:0 0 12px}
.funding-page .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.funding-page .card__header{
  display:flex;align-items:baseline;gap:12px;justify-content:space-between;
  flex-wrap:wrap; /* Badge darf umbrechen -> verhindert Überlauf mobil */
}
.funding-page .card__header h3{margin:0}
.funding-page .badge{
  font-size:12px;background:var(--badge);padding:4px 8px;border-radius:999px;
  color:var(--muted);border:1px solid var(--line)
}
@media (max-width:640px){
  .funding-page .badge{margin-top:6px}
}

.funding-page .card__bullets{margin:12px 0;padding-left:18px}
.funding-page .card__bullets li{margin:6px 0}

/* ---------- Aktionen / Details ---------- */
.funding-page .card__actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.funding-page .card__details{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.funding-page .card__details summary{cursor:pointer;margin-top:8px;color:var(--brand);font-weight:600}
.funding-page .card__details p{margin:8px 0 0}
.funding-page .subdetails{margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.funding-page .subdetails summary{font-weight:600}

/* ---------- Fußnote ---------- */
.funding-page .footnote{margin:32px 0 0;color:#666;font-size:14px}

/* ---------- Responsive Grid ---------- */
@media (max-width: 960px){ .funding-page .grid{grid-template-columns:1fr} }
/* === Fix: Button-Schrift IMMER weiß (auch beim rosa Button) === */
.funding-page a.btn,
.funding-page a.btn:link,
.funding-page a.btn:visited,
.funding-page a.btn:hover,
.funding-page a.btn:active,
.funding-page button.btn {
  color: #fff !important;
  text-decoration: none;
}

/* Rosa Button: Hintergrund bleibt rosa, Text weiß */
.funding-page .btn--secondary {
  background: var(--brand-2) !important; /* #fbb7a5 */
  color: #fff !important;
  border-color: transparent;
}

/* Falls Icons im Button sind, ebenfalls weiß */
.funding-page .btn i,
.funding-page .btn svg {
  color: #fff !important;
  fill: #fff !important;
}
/* ==========
   Interaktiver Look für alle <summary>-Toggles
   (inkl. "Was wir von Ihnen brauchen")
   ========== */

/* Standardstil: wirkt wie ein Link/Button */
.funding-page details > summary{
  cursor:pointer;
  color:var(--brand);                /* Rot als Linkfarbe */
  font-weight:600;
  padding:6px 8px;                   /* größerer Klickbereich */
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .2s, color .2s, box-shadow .2s, text-decoration-color .2s;
  text-decoration:none;
}

/* Hover/Focus: farbiges „Aufscheinen“ */
.funding-page details > summary:hover,
.funding-page details > summary:focus{
  background:var(--brand-2);         /* Rosa hinterlegt */
  color:#fff;                        /* weiße Schrift beim Hover/Focus */
  outline:none;
}

/* Offen-Zustand ebenfalls betonen (optional, für Konsistenz) */
.funding-page details[open] > summary{
  background:var(--brand-2);
  color:#fff;
}

/* Pfeilmarker von Browser ausblenden (wir haben eigenen Text/Icons) */
.funding-page details > summary::-webkit-details-marker{ display:none; }

/* Speziell für den CTA-Block (falls du dort noch etwas kräftiger willst) */
.funding-page .card--cta .subdetails > summary{
  box-shadow:0 0 0 0 rgba(214,5,37,0);
}
.funding-page .card--cta .subdetails > summary:hover,
.funding-page .card--cta .subdetails > summary:focus{
  box-shadow:0 0 0 3px rgba(214,5,37,.15);  /* dezente Focus-Hervorhebung */
}

/* Der kleine Pfeil in deinem <summary> (falls als <span> enthalten) erbt die Farbe */
.funding-page details > summary span[aria-hidden="true"]{
  line-height:1;
}