/* =========================================================
   faspektiven e.V. - moderne HTML/CSS/JS-Vorlage
   Hier koennen Farben, Abstaende, Kacheln und Buttons gezielt angepasst werden.
   ========================================================= */
 :root{
  /* Warme, moderne Farbwelt: Mint als Akzent, Pink nur sehr sparsam */
  --bg:#f7f8f4; --surface:#ffffff; --text:#26302d; --muted:#5f6b67;
  --mint:#4fbf9f; --mint-dark:#257961; --mint-soft:#e7f6f1;
  --pink:#c02678; --pink-dark:#8f1d58; --pink-soft:#fbf0f6;
  --blue:#7da7d9; --blue-soft:#eaf2fb;
  --apricot:#f3b37d; --apricot-soft:#fff0e4;
  --lavender:#a996d8; --lavender-soft:#f1eefb;
  --sage:#a8c7a0; --sage-soft:#eff7ec;
  --sand:#f1e9dc; --line:#dedbd5;
  --gray-50:#fafafa; --gray-100:#f0efec; --gray-200:#dedbd5; --gray-300:#c9c5bd; --gray-700:#4d5652; --gray-900:#26302d;
  --shadow:0 18px 45px rgba(42,54,49,.10); --radius:26px; --max:1140px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:"Atkinson Hyperlegible",system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);font-size:18px;line-height:1.6} a{color:var(--gray-900);font-weight:700;text-decoration-color:var(--gray-300);text-underline-offset:3px} a:hover{text-decoration:none} img,svg{max-width:100%}.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}.narrow{max-width:780px}.skip-link{position:absolute;left:-999px;top:10px;background:var(--text);color:#fff;padding:10px 16px;border-radius:10px;z-index:20}.skip-link:focus{left:10px}.site-header{position:sticky;top:0;z-index:10;background:rgba(247,248,244,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}.brand-mark{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--mint-dark),var(--mint));display:grid;place-items:center;color:#fff;font-weight:700}.brand-text strong{display:block;font-size:1.05rem}.brand-text span{display:block;color:var(--muted);font-size:.9rem}.nav-toggle{display:none}.main-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.main-nav a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:999px;font-size:.95rem}.main-nav a:hover,.main-nav a[aria-current="page"]{background:var(--gray-100);color:var(--gray-900)}.hero{padding:80px 0 58px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}.hero-copy{max-width:720px}.eyebrow{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-700);font-weight:700;margin:0 0 10px}h1,h2,h3{line-height:1.15;margin:0 0 16px}h1{font-size:clamp(2.35rem,6vw,4.8rem);letter-spacing:-.04em}h2{font-size:clamp(1.7rem,3vw,2.55rem);letter-spacing:-.03em}h3{font-size:1.3rem}.lead{font-size:clamp(1.25rem,2.2vw,1.65rem);color:#414141}.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 20px;border-radius:999px;text-decoration:none;border:2px solid transparent;font-weight:700;cursor:pointer;font-size:1rem}.button.primary{background:var(--mint-dark);color:#fff}.button.primary:hover{background:#1d6652}.button.secondary{background:#fff;color:var(--gray-900);border-color:var(--gray-200)}.button.secondary:hover{border-color:var(--mint);background:var(--mint-soft)}.hero-illustration{min-height:360px;position:relative}.blob{position:absolute;border-radius:42% 58% 45% 55%;background:linear-gradient(135deg,var(--gray-100),var(--sand));box-shadow:var(--shadow)}.blob-large{width:280px;height:280px;right:48px;top:25px;display:grid;place-items:center}.floating-card{position:absolute;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:14px 18px;font-weight:700}.card-one{top:35px;left:20px}.card-two{right:0;bottom:52px}.card-three{left:55px;bottom:20px}.section{padding:70px 0}.section.soft{background:rgba(255,255,255,.45);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-head{max-width:760px;margin-bottom:30px}.card-grid{display:grid;gap:22px}.card-grid.four{grid-template-columns:repeat(4,1fr)}.card-grid.three{grid-template-columns:repeat(3,1fr)}.card-grid.two{grid-template-columns:repeat(2,1fr)}.service-card,.mini-card,.info-card,.content-card,.side-card,.program-card,.contact-card,.cta-box,.highlight-box,.timeline-item,.registration-form,.event-date-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.service-card{padding:26px;display:flex;flex-direction:column;min-height:275px}.service-card a{margin-top:auto}.mini-card,.info-card,.content-card,.side-card,.program-card{padding:28px}.icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:18px;background:var(--mint-soft);color:var(--mint-dark);margin-bottom:18px;border:1px solid rgba(79,191,159,.28);box-shadow:0 10px 24px rgba(42,54,49,.08)}.icon::before{font-size:29px}.icon-chat::before{content:"💬"}.icon-book::before{content:"📘"}.icon-info::before{content:"i";font-weight:700;font-size:34px}.icon-people::before{content:"👥"}.icon-heart::before{content:"♡";font-size:42px}.icon-calendar::before{content:"📅"}.icon-network::before{content:"◎";font-size:40px}.icon-mail::before{content:"✉"}.icon-hand::before{content:"🤝"}.event-highlight{padding-top:35px}.highlight-box{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:34px;background:linear-gradient(135deg,#fff,var(--mint-soft))}.highlight-icon .icon{width:76px;height:76px;background:#fff}.two-col,.content-layout,.form-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.content-layout{grid-template-columns:1.4fr .8fr}.contact-card,.cta-box{padding:34px;display:flex;justify-content:space-between;align-items:center;gap:24px}.contact-card.large{align-items:stretch}.subhero{padding:72px 0 42px;background:linear-gradient(135deg,var(--mint-soft),rgba(241,233,220,.55))}.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.check-list{list-style:none;padding:0}.check-list li{margin:10px 0;padding-left:30px;position:relative}.check-list li::before{content:"✓";position:absolute;left:0;color:var(--mint-dark);font-weight:700}.top-space{margin-top:25px}.site-footer{background:#2f2930;color:#fff;padding:45px 0}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}.site-footer a{color:#fff}.footer-links{display:flex;flex-direction:column;gap:8px}.event-hero{background:linear-gradient(135deg,var(--mint-soft),var(--sand))}.event-date-card{padding:36px;text-align:center}.event-date-card strong{display:block;font-size:2rem;color:var(--gray-900)}.timeline{display:grid;gap:18px}.timeline-item{display:grid;grid-template-columns:95px 1fr;gap:22px;padding:25px}.date{background:var(--mint-dark);color:#fff;border-radius:20px;display:grid;place-items:center;font-weight:700;min-height:82px;text-align:center}.registration-form{padding:28px}.form-row{display:grid;gap:8px;margin-bottom:18px}label,legend{font-weight:700}input,select,textarea{width:100%;border:2px solid var(--line);border-radius:16px;padding:13px 14px;font:inherit;background:#fff;color:var(--text)}input:focus,select:focus,textarea:focus{outline:3px solid var(--mint-soft);border-color:var(--mint-dark)}fieldset{border:0;padding:0;margin:0}.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;margin:10px 0}.check input{width:auto;margin-top:8px}.privacy{margin:18px 0}.small-note,.form-message{font-size:.95rem;color:var(--muted)}.form-message.success{color:#236a3b}.form-message.error{color:#9b1c1c}
@media (max-width:960px){.hero-grid,.two-col,.content-layout,.form-layout{grid-template-columns:1fr}.card-grid.four,.card-grid.three,.program-grid{grid-template-columns:1fr 1fr}.hero-illustration{min-height:250px}.blob-large{right:10%;top:0}.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){body{font-size:17px}.container{width:min(100% - 28px,var(--max))}.nav-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-weight:700}.main-nav{display:none;position:absolute;left:14px;right:14px;top:76px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--shadow)}.main-nav.open{display:grid}.main-nav a{display:block}.hero{padding:50px 0 38px}.hero-grid{gap:22px}.hero-illustration{display:none}.card-grid.four,.card-grid.three,.card-grid.two,.program-grid{grid-template-columns:1fr}.highlight-box{grid-template-columns:1fr}.contact-card,.cta-box{display:grid}.timeline-item{grid-template-columns:1fr}.date{width:95px}.footer-grid{grid-template-columns:1fr}.section{padding:48px 0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Anpassung: abstraktes Startseitenbild mit mehreren Formen und Verbindungslinien */
.hero-abstract{position:relative;min-height:390px;border-radius:34px;background:linear-gradient(135deg,#fff,var(--mint-soft));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;padding:28px}
.hero-abstract::before{content:"";position:absolute;inset:34px;background:linear-gradient(120deg,transparent 0 19%,rgba(45,45,45,.18) 19.3% 19.8%,transparent 20.1% 49%,rgba(45,45,45,.15) 49.2% 49.7%,transparent 50%),linear-gradient(42deg,transparent 0 33%,rgba(79,191,159,.28) 33.2% 33.7%,transparent 34%);pointer-events:none}
.abstract-shape{position:absolute;border:1px solid var(--gray-300);box-shadow:0 12px 30px rgba(50,50,50,.08)}
.shape-circle{width:118px;height:118px;border-radius:999px;background:var(--blue-soft);left:34px;top:42px}
.shape-circle.small{width:58px;height:58px;right:48px;top:58px;background:var(--apricot-soft)}
.shape-rect{width:148px;height:86px;border-radius:24px;background:var(--sage-soft);right:80px;bottom:58px;transform:rotate(-7deg)}
.shape-rect.two{width:84px;height:130px;left:70px;bottom:40px;background:var(--lavender-soft);transform:rotate(8deg)}
.shape-triangle{width:0;height:0;border-left:62px solid transparent;border-right:62px solid transparent;border-bottom:110px solid var(--apricot-soft);border-top:0;right:42px;top:128px;filter:drop-shadow(0 12px 20px rgba(50,50,50,.10))}
.abstract-label{position:absolute;background:#fff;border:1px solid var(--gray-200);border-radius:18px;padding:12px 15px;font-weight:700;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:9px}
.abstract-label .icon{width:34px;height:34px;border-radius:12px;margin:0;font-size:.9rem}
.label-beratung{left:26px;top:178px}.label-fasd{right:22px;top:24px}.label-fortbildung{left:136px;bottom:54px}
.pink-spark{position:absolute;width:16px;height:16px;border-radius:999px;background:var(--pink);right:150px;top:170px;opacity:.45}
.icon-compass::before{content:"◎"}.icon-light::before{content:"✦"}.icon-house::before{content:"⌂"}.icon-list::before{content:"☷"}.icon-clock::before{content:"◷"}.icon-eye::before{content:"◌"}.icon-shield::before{content:"◇"}.icon-star::before{content:"✦"}.icon-check::before{content:"✓"}.icon-download::before{content:"⇩"}
.icon-accent{background:var(--mint-soft);color:var(--mint-dark);border-color:rgba(79,191,159,.35)}
.mini-card .icon,.program-card .icon,.timeline-item .icon{width:46px;height:46px;border-radius:16px;margin-bottom:12px}
@media (max-width:760px){.hero-abstract{display:none}}


/* Anpassung: mehr Farbe, Mint als Hauptakzent und farbige Icons */
.service-card:nth-child(1) .icon,.icon-chat{background:var(--mint-soft);color:var(--mint-dark);border-color:rgba(79,191,159,.35)}
.service-card:nth-child(2) .icon,.icon-book{background:var(--blue-soft);color:#315f91;border-color:rgba(125,167,217,.35)}
.service-card:nth-child(3) .icon,.icon-info{background:var(--lavender-soft);color:#6650a3;border-color:rgba(169,150,216,.35)}
.service-card:nth-child(4) .icon,.icon-people{background:var(--apricot-soft);color:#9a5a23;border-color:rgba(243,179,125,.35)}
.icon-heart,.icon-hand{background:var(--pink-soft);color:var(--pink-dark);border-color:rgba(192,38,120,.22)}
.icon-calendar,.icon-clock{background:var(--mint-soft);color:var(--mint-dark);border-color:rgba(79,191,159,.35)}
.icon-network,.icon-compass,.icon-house{background:var(--sage-soft);color:#4d7446;border-color:rgba(168,199,160,.38)}
.icon-light,.icon-star{background:var(--apricot-soft);color:#9a5a23;border-color:rgba(243,179,125,.38)}
.icon-list,.icon-check,.icon-download,.icon-mail,.icon-eye,.icon-shield{background:var(--blue-soft);color:#315f91;border-color:rgba(125,167,217,.35)}
.abstract-label .icon-chat{background:var(--mint-soft);color:var(--mint-dark)}
.abstract-label .icon-book{background:var(--blue-soft);color:#315f91}
.abstract-label .icon-info{background:var(--lavender-soft);color:#6650a3}
.icon::after{content:"";position:absolute;width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.18;transform:translate(18px,-18px)}
.icon{position:relative;overflow:hidden}
.button.primary{box-shadow:0 12px 26px rgba(37,121,97,.22)}
a{color:var(--mint-dark);text-decoration-color:rgba(79,191,159,.45)}
.main-nav a:hover,.main-nav a[aria-current="page"]{background:var(--mint-soft);color:var(--mint-dark)}

/* =========================================================
   Anpassung: leichter Mint-Akzent, mehr farbige Icon-Kacheln
   Wunsch: RGB 172, 246, 200 / #ACF6C8, weiterhin viel Grau
   ========================================================= */
:root{
  --bg:#f8faf8;
  --surface:#ffffff;
  --text:#25302c;
  --muted:#64706c;
  --mint:#acf6c8;
  --mint-2:#dfffea;
  --mint-3:#f1fff6;
  --mint-dark:#3f8f67;
  --mint-line:#87d9a5;
  --pink:#c02678;
  --pink-soft:#fff3f8;
  --blue:#8fb9e8;
  --blue-soft:#edf6ff;
  --apricot:#ffc58f;
  --apricot-soft:#fff3e8;
  --lavender:#bba9ed;
  --lavender-soft:#f4f0ff;
  --sage:#c2dfb8;
  --sage-soft:#f2faee;
  --sand:#f2eee6;
  --line:#e5e2dc;
  --shadow:0 18px 48px rgba(45,52,49,.075);
}
body{background:linear-gradient(180deg,#fbfcfb 0%,var(--bg) 38%,#f6f8f6 100%)}
.site-header{background:rgba(248,250,248,.92)}
.brand-mark{background:linear-gradient(135deg,#333b38 0%,#53605b 48%,var(--mint-line) 100%);color:#fff}
a{color:#376f56;text-decoration-color:rgba(172,246,200,.9)}
.main-nav a:hover,.main-nav a[aria-current="page"]{background:linear-gradient(135deg,var(--mint-3),#fff);color:#2f7052}
.subhero{background:linear-gradient(135deg,#ffffff 0%,var(--mint-3) 55%,#f4f4f1 100%)}
.section.soft{background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(242,247,243,.72));}
.service-card,.mini-card,.info-card,.content-card,.side-card,.program-card,.contact-card,.cta-box,.highlight-box,.timeline-item,.registration-form,.event-date-card{border-color:var(--line);box-shadow:var(--shadow)}
.service-card:hover,.mini-card:hover,.program-card:hover{transform:translateY(-2px);box-shadow:0 22px 56px rgba(45,52,49,.10);transition:transform .18s ease, box-shadow .18s ease}
.button.primary{background:linear-gradient(135deg,#376f56 0%,#4da875 50%,#72d895 100%);color:#fff;box-shadow:0 14px 30px rgba(63,143,103,.24)}
.button.primary:hover{background:linear-gradient(135deg,#2f604a 0%,#438f66 55%,#65c886 100%)}
.button.secondary{background:#fff;color:#2f3a36;border-color:#d7d7d2}
.button.secondary:hover{border-color:var(--mint-line);background:linear-gradient(135deg,#fff,var(--mint-3))}
.check-list li::before{color:var(--mint-dark)}
.date{background:linear-gradient(135deg,#38423e,#4c6f5d 55%,#8ce6ad);color:#fff}
.event-hero{background:linear-gradient(135deg,#fff 0%,var(--mint-3) 50%,#f0f1ed 100%)}
.highlight-box{background:linear-gradient(135deg,#ffffff 0%,var(--mint-3) 55%,#f6f6f2 100%)}

/* Icon-System: alle Icons bleiben in farbigen Kacheln, aber insgesamt leichter. */
.icon{background:linear-gradient(135deg,#ffffff 0%,var(--mint-2) 100%);border-color:rgba(135,217,165,.62);color:#376f56;box-shadow:0 12px 28px rgba(45,52,49,.085)}
.icon::after{opacity:.16;background:currentColor}
.service-card:nth-child(1) .icon,.icon-chat{background:linear-gradient(135deg,#ffffff 0%,#dfffea 100%);color:#367a56;border-color:#a6edbd}
.service-card:nth-child(2) .icon,.icon-book{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%);color:#3f6f9f;border-color:#b6d5f3}
.service-card:nth-child(3) .icon,.icon-info{background:linear-gradient(135deg,#ffffff 0%,#f4f0ff 100%);color:#6959a6;border-color:#d1c5f4}
.service-card:nth-child(4) .icon,.icon-people{background:linear-gradient(135deg,#ffffff 0%,#fff3e8 100%);color:#9a642d;border-color:#ffd3a8}
.icon-heart,.icon-hand{background:linear-gradient(135deg,#ffffff 0%,#fff3f8 100%);color:#a5366c;border-color:#f1c9db}
.icon-calendar,.icon-clock{background:linear-gradient(135deg,#ffffff 0%,#e4fff0 100%);color:#347a55;border-color:#a6edbd}
.icon-network,.icon-compass,.icon-house{background:linear-gradient(135deg,#ffffff 0%,#f2faee 100%);color:#53784a;border-color:#cde8c4}
.icon-light,.icon-star{background:linear-gradient(135deg,#ffffff 0%,#fff3e8 100%);color:#9a642d;border-color:#ffd3a8}
.icon-list,.icon-check,.icon-download,.icon-mail,.icon-eye,.icon-shield{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%);color:#3f6f9f;border-color:#b6d5f3}

/* Moderne, ruhigere Symbolzeichen statt bunter Emoji-Optik. */
.icon-chat::before{content:"↔";font-size:31px;font-weight:800}
.icon-book::before{content:"▤";font-size:32px;font-weight:800}
.icon-info::before{content:"i";font-size:34px;font-weight:900;font-family:Georgia,serif}
.icon-people::before{content:"●●";font-size:22px;letter-spacing:-5px;font-weight:900}
.icon-heart::before{content:"♡";font-size:40px}
.icon-calendar::before{content:"□";font-size:37px;font-weight:800}
.icon-network::before{content:"◎";font-size:40px}
.icon-mail::before{content:"✉";font-size:28px}
.icon-hand::before{content:"◇";font-size:36px}
.icon-compass::before{content:"◎";font-size:38px}.icon-light::before{content:"✦";font-size:34px}.icon-house::before{content:"⌂";font-size:34px}.icon-list::before{content:"☷";font-size:34px}.icon-clock::before{content:"◷";font-size:36px}.icon-eye::before{content:"◌";font-size:42px}.icon-shield::before{content:"⬠";font-size:30px}.icon-star::before{content:"✦";font-size:34px}.icon-check::before{content:"✓";font-size:34px;font-weight:900}.icon-download::before{content:"⇩";font-size:34px;font-weight:900}

/* Startseiten-Grafik: heller, mehr Verlauf, weiterhin abstrakt mit Formen. */
.hero-abstract{background:linear-gradient(135deg,#fff 0%,var(--mint-3) 55%,#f1f2ef 100%);border-color:#e8e6e0}
.hero-abstract::before{background:linear-gradient(120deg,transparent 0 19%,rgba(75,92,85,.16) 19.3% 19.8%,transparent 20.1% 49%,rgba(75,92,85,.12) 49.2% 49.7%,transparent 50%),linear-gradient(42deg,transparent 0 33%,rgba(172,246,200,.72) 33.2% 33.8%,transparent 34%)}
.shape-circle{background:linear-gradient(135deg,#f7fbff,#dfffea);border-color:#bdeecb}
.shape-circle.small{background:linear-gradient(135deg,#fff,#fff3e8);border-color:#ffd3a8}
.shape-rect{background:linear-gradient(135deg,#fff,#f2faee);border-color:#cde8c4}
.shape-rect.two{background:linear-gradient(135deg,#fff,#f4f0ff);border-color:#d1c5f4}
.shape-triangle{border-bottom-color:#fff3e8;opacity:.96}
.abstract-label{background:rgba(255,255,255,.94);border-color:#e0ded8;box-shadow:0 16px 36px rgba(45,52,49,.09)}
.pink-spark{background:var(--pink);opacity:.22}

input:focus,select:focus,textarea:focus{outline:4px solid rgba(172,246,200,.72);border-color:var(--mint-dark)}

/* =========================================================
   Anpassung: helle Mint-Farbwelt + emojiartige, konsistente Icons
   Wuensche: Icons mittig in Kacheln, alle Icons emojiartig,
   gleiche Icons je Bereich, Startseiten-Grafik deutlich reduzierter.
   ========================================================= */
:root{
  --mint:#acf6c8;
  --mint-2:#e4ffed;
  --mint-3:#f5fff8;
  --mint-dark:#438560;
  --mint-line:#9de8b8;
  --bg:#f8faf8;
  --surface:#ffffff;
  --line:#e7e5df;
  --shadow:0 18px 44px rgba(45,52,49,.065);
}

/* mehr Leichtigkeit: viel Grau/Weiss, Mint als heller Verlauf */
body{background:linear-gradient(180deg,#ffffff 0%,#f9fbf9 42%,#f5f7f5 100%)}
.section.soft{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(246,249,247,.86))}
.subhero,.event-hero{background:linear-gradient(135deg,#fff 0%,var(--mint-3) 62%,#f2f3f0 100%)}
.highlight-box{background:linear-gradient(135deg,#ffffff 0%,var(--mint-3) 72%,#f4f5f2 100%)}
.button.primary{background:linear-gradient(135deg,#3e6f55 0%,#66bb83 55%,var(--mint) 100%);color:#17231e}
.button.primary:hover{background:linear-gradient(135deg,#335f48 0%,#57a875 58%,#99eab7 100%)}

/* Icon-Kacheln: emojiartig, farbig, exakt zentriert */
.icon{
  display:grid;
  place-items:center;
  text-align:center;
  width:62px;
  height:62px;
  border-radius:20px;
  line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
  font-weight:400;
  overflow:hidden;
}
.icon::before{
  display:block;
  width:1em;
  height:1em;
  line-height:1;
  font-size:31px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
  font-weight:400;
  transform:translateY(-1px);
}
.icon::after{display:none}

/* Icons mittig in allen Kacheln / Karten */
.service-card > .icon,
.mini-card > .icon,
.info-card > .icon,
.content-card > .icon,
.side-card > .icon,
.program-card > .icon,
.contact-card .icon,
.cta-box .icon,
.event-date-card > .icon,
.timeline-item .icon{
  margin-left:auto;
  margin-right:auto;
}
.service-card,.mini-card,.program-card,.info-card,.side-card,.content-card,.event-date-card{text-align:center}
.content-card ul,.side-card ul,.program-card ul,.info-card ul{text-align:left}
.timeline-item .icon{margin-bottom:14px}

/* Konsistentes Icon-System nach Bereich / Bedeutung */
.icon-chat::before{content:"💬"}       /* Beratung */
.icon-book::before{content:"📚"}       /* Fortbildung */
.icon-info::before{content:"🧠"}       /* FASD verstehen */
.icon-people::before{content:"👥"}     /* Betroffene / Menschen */
.icon-heart::before{content:"💚"}      /* Zuwendung / Mitglied */
.icon-calendar::before{content:"📅"}   /* Aktionswoche / Termine */
.icon-network::before{content:"🔗"}    /* Runder Tisch / Netzwerk */
.icon-mail::before{content:"📧"}       /* Kontakt / E-Mail */
.icon-hand::before{content:"🤝"}       /* Unterstützung / Spenden */
.icon-compass::before{content:"🧭"}    /* Orientierung */
.icon-light::before{content:"💡"}      /* Ideen / Workshop */
.icon-house::before{content:"🏠"}      /* Adresse / Alltag */
.icon-list::before{content:"📝"}       /* Liste / Praxis */
.icon-clock::before{content:"🕒"}      /* Zeit */
.icon-eye::before{content:"🎬"}        /* Film / Sehen */
.icon-shield::before{content:"🛡️"}    /* Schutz / Datenschutz */
.icon-star::before{content:"✨"}       /* Eröffnung / Besonderes */
.icon-check::before{content:"✅"}      /* Hilfe / erledigt */
.icon-download::before{content:"⬇️"}   /* Download */

/* Kontakt soll ueberall wirklich Kontakt/E-Mail sein */
.side-card .icon-mail,.contact-card .icon-mail,.cta-box .icon-mail{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%);border-color:#b6d5f3;color:#3f6f9f}

/* Farbig, aber leicht: Icon-Kacheln behalten klare Farbfamilien */
.icon-chat{background:linear-gradient(135deg,#ffffff 0%,#dfffea 100%);border-color:#a6edbd;color:#367a56}
.icon-book{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%);border-color:#b6d5f3;color:#3f6f9f}
.icon-info{background:linear-gradient(135deg,#ffffff 0%,#f4f0ff 100%);border-color:#d1c5f4;color:#6959a6}
.icon-people{background:linear-gradient(135deg,#ffffff 0%,#fff3e8 100%);border-color:#ffd3a8;color:#9a642d}
.icon-heart,.icon-hand{background:linear-gradient(135deg,#ffffff 0%,#f0fff5 100%);border-color:#a6edbd;color:#367a56}
.icon-calendar,.icon-clock{background:linear-gradient(135deg,#ffffff 0%,#e4fff0 100%);border-color:#a6edbd;color:#347a55}
.icon-network,.icon-compass,.icon-house{background:linear-gradient(135deg,#ffffff 0%,#f2faee 100%);border-color:#cde8c4;color:#53784a}
.icon-light,.icon-star{background:linear-gradient(135deg,#ffffff 0%,#fff3e8 100%);border-color:#ffd3a8;color:#9a642d}
.icon-list,.icon-check,.icon-download,.icon-mail,.icon-eye,.icon-shield{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%);border-color:#b6d5f3;color:#3f6f9f}

/* Startseiten-Grafik: deutlich reduziert und leichter */
.hero-illustration{min-height:300px}
.hero-abstract{
  min-height:285px;
  max-width:430px;
  margin-left:auto;
  padding:22px;
  border-radius:30px;
  background:linear-gradient(135deg,#ffffff 0%,var(--mint-3) 72%,#f4f5f2 100%);
}
.hero-abstract::before{
  inset:58px 48px;
  background:
    linear-gradient(25deg,transparent 0 44%,rgba(85,104,96,.16) 44.3% 44.9%,transparent 45.2%),
    linear-gradient(145deg,transparent 0 49%,rgba(172,246,200,.85) 49.2% 49.9%,transparent 50.2%);
}
.abstract-shape{opacity:.42;box-shadow:none}
.shape-circle{width:92px;height:92px;left:34px;top:36px}
.shape-rect{width:116px;height:68px;right:34px;bottom:38px;transform:rotate(-5deg)}
.shape-triangle,.shape-rect.two,.shape-circle.small,.pink-spark{display:none}
.abstract-label{
  padding:10px 13px;
  border-radius:18px;
  gap:8px;
  font-size:.95rem;
  box-shadow:0 12px 28px rgba(45,52,49,.075);
}
.abstract-label .icon{width:38px;height:38px;border-radius:13px;margin:0}
.abstract-label .icon::before{font-size:21px}
.label-beratung{left:28px;top:142px}
.label-fortbildung{left:148px;bottom:34px}
.label-fasd{right:22px;top:38px}

@media (max-width:960px){.hero-abstract{margin-left:0;max-width:100%}}

/* =========================================================
   Anpassung: Button-System
   Wunsch: Primaerbutton in Mint RGB 172,246,200 mit leichtem Verlauf.
   Sekundaerbutton mit Mint-Rand. Beide werden beim Hover dunkler.
   ========================================================= */
.button{
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.button.primary{
  background:linear-gradient(135deg,#ffffff 0%,#acf6c8 42%,#8ee8ad 100%);
  color:#20342b;
  border-color:#acf6c8;
  box-shadow:0 12px 28px rgba(85,150,110,.18);
}
.button.primary:hover,
.button.primary:focus-visible{
  background:linear-gradient(135deg,#dfffe9 0%,#8ee8ad 48%,#69cf8d 100%);
  border-color:#69cf8d;
  color:#10251a;
  box-shadow:0 14px 32px rgba(70,138,96,.24);
  transform:translateY(-1px);
}
.button.secondary{
  background:#ffffff;
  color:#20342b;
  border-color:#acf6c8;
  box-shadow:none;
}
.button.secondary:hover,
.button.secondary:focus-visible{
  background:linear-gradient(135deg,#ffffff 0%,#e4ffed 100%);
  border-color:#69cf8d;
  color:#10251a;
  box-shadow:0 10px 24px rgba(70,138,96,.12);
  transform:translateY(-1px);
}
.button:active{
  transform:translateY(0);
}


/* =========================================================
   Anpassung: Logo im Header, Startseite ohne Grafik, Timeline, Rechtsseiten
   ========================================================= */
.brand{gap:14px;min-width:230px}
.brand-logo{display:grid;place-items:center;width:92px;min-width:92px;height:auto}
.brand-logo img{display:block;width:92px;height:auto}
.brand-text strong{font-size:1rem}
.brand-text span{font-size:.88rem}
.brand-mark{display:none}
.hero-home .hero-grid{grid-template-columns:1fr}
.hero-home .hero-copy{max-width:980px}
.hero-home .lead{max-width:none}
.wide-card{max-width:100%}
.bank-card{background:linear-gradient(135deg,#fff,#f5fff8);border:1px solid var(--line);border-radius:20px;padding:18px;margin:18px 0;text-align:left}
.legal-text{text-align:left;max-width:920px}
.legal-text h2,.legal-text h3{margin-top:26px}
.milestones .timeline-item{position:relative;overflow:hidden}
.milestones .timeline-item.current{background:linear-gradient(135deg,#fff 0%,#f5fff8 100%)}
.milestones .timeline-item.recurring{border-style:dashed;background:linear-gradient(135deg,#fff 0%,#f6f8f6 58%,#f0fff5 100%)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--mint-line);background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;color:#20342b;margin-top:8px}
@media (max-width:760px){.brand-logo{width:72px;min-width:72px}.brand-logo img{width:72px}.brand-text strong{font-size:.95rem}.brand-text span{font-size:.8rem}.brand{min-width:0}.header-inner{gap:10px}.main-nav{top:84px}}


/* =========================================================
   Anpassung: Menue-Startlink und Timeline-Icons in Jahreskachel
   ========================================================= */
.header-start{display:flex;align-items:center;gap:16px;min-width:210px}
.home-link{display:inline-flex;align-items:center;min-height:44px;padding:9px 13px;border-radius:999px;color:var(--text);text-decoration:none;font-size:.95rem;font-weight:700}
.home-link:hover,.home-link:focus-visible{background:linear-gradient(135deg,var(--mint-3),#fff);color:#2f7052;text-decoration:none}
.brand{min-width:0}
.brand-logo{width:120px;min-width:120px}
.brand-logo img{width:120px}
.date{gap:8px;padding:12px 8px;align-content:center}
.date span:last-child{display:block;line-height:1.15}
.date .icon{margin:0 auto 4px;width:48px;height:48px;border-radius:16px}
@media (max-width:760px){.header-start{min-width:0;gap:10px}.brand-logo{width:82px;min-width:82px}.brand-logo img{width:82px}.home-link{padding:8px 10px;font-size:.9rem}.date{width:115px}}


/* Anpassung: Aktionswoche-Programm und Flyer-Download */
.cta-box.flyer-download .icon{
  margin-left:0;
  margin-right:0;
}