:root{
      --ink:#0f172a;
      --muted:#475569;
      --brand:#ea580c;
      --brand-700:#c2410c;
      --mint:#ecfdf5;
      --apricot:#fff3e8;
      --bg:#ffffff;
      --line:rgba(15,23,42,.10);
      --radius:22px;
      --radius-sm:16px;
      --max:1140px;
      --shadow-lg:0 24px 64px rgba(16,24,40,.14);
      --shadow-md:0 14px 36px rgba(16,24,40,.12);
      --shadow-sm:0 8px 20px rgba(16,24,40,.10);
      --card-grad:linear-gradient(180deg, #fff, #fff9f3 60%, #fff);
      --brand-grad:linear-gradient(135deg, #fff7ed 0%, #ffe8d6 40%, #fff 100%);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; color:var(--ink);
      font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(50% 40% at 50% -10%, rgba(236,253,245,.7), transparent 70%),
        radial-gradient(40% 26% at 50% 12%, rgba(255,228,204,.6), transparent 70%),
        #fff;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
      line-height:1.6;
    }
    a{color:var(--brand); text-underline-offset:3px; text-decoration-thickness:2px}
    .container{max-width:var(--max); margin-inline:auto; padding-inline:22px}

    /* Typo: gute Umbrüche & Trennungen */
    h1,h2,h3,.lead{text-wrap:balance}
    p,li,blockquote{hyphens:auto; -webkit-hyphens:auto; word-break:normal; overflow-wrap:break-word}
    .measure{max-width:68ch; margin-inline:auto}
    .measure-wide{max-width:78ch; margin-inline:auto}

    /* Decorative background removed: parallax off */
    .layer{position:fixed; inset:0; z-index:-2; pointer-events:none; transform:translateZ(0)}
    .l1{background:radial-gradient(50% 40% at 50% -10%, rgba(236,253,245,.9), transparent 70%)}
    /* zentriert statt rechtslastig */
    .l2{background:radial-gradient(40% 26% at 50% 12%, rgba(255,228,204,.8), transparent 70%)}
    /* leicht links, um auszubalancieren */
    .l3{background:radial-gradient(30% 20% at 30% 22%, rgba(255,255,255,.9), transparent 60%)}

    /* Hero */
    header.hero{padding:140px 0 96px; text-align:center; position:relative}
    h1, h2{color:var(--brand); font-weight:900; text-align:center; letter-spacing:.1px}
    h1{margin:16px 0 12px; font-size:clamp(38px,6vw,52px); line-height:1.06; text-wrap:balance}
    h2{margin:0 0 20px; font-size:clamp(26px,4.4vw,40px); line-height:1.12}
    .kicker{display:inline-block; font-weight:900; letter-spacing:.09em; font-size:.92rem; color:#8a5a3a; background:#fff7ed; border:1px solid #ffd8c4; padding:6px 12px; border-radius:9999px}
    .lead{color:#3d5a62; font-size:clamp(18px,2.1vw,20px); font-weight:700; text-align:center}
    .divider{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:30px auto; width:min(900px,92%)}

    /* Emphasis */
    .mark{background:linear-gradient(180deg, rgba(255,184,146,.28), rgba(255,184,146,.0)); border-bottom:2px solid rgba(234,88,12,.28)}
    .pull{font-weight:900; color:var(--brand-700)}

    /* Sections */
    section{padding:70px 0; text-align:center}
    .intro{max-width:980px; margin:0 auto}
    .prose{color:#334155; font-weight:600; line-height:1.7}
    .prose + .prose{margin-top:.7em}

    /* Cards (premium) */
    .grid{display:grid; gap:16px; grid-template-columns:1.05fr .95fr; align-items:start; max-width:1060px; margin:0 auto}
    @media(max-width:980px){.grid{grid-template-columns:1fr}}
    .card{
      background:var(--card-grad);
      border:1px solid rgba(15,23,42,.06);
      border-radius:var(--radius);
      padding:24px 24px;
      box-shadow:var(--shadow-sm);
      text-align:left;
      transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    }
    .card.brand{background:var(--brand-grad); border-color:#ffd8c4}
    .card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}

    /* Lists (left aligned) */
    .nlist{counter-reset:nstep; list-style:none; padding:0; margin:0; width:100%; display:flex; flex-direction:column; gap:12px;}
    .nitem{
  position:relative;
  display:block;
  padding:12px 14px 12px 50px;  /* mobile */
  min-height:88px;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  word-break:keep-all;
  text-align:left;
}
    .nitem::before{
  counter-increment:nstep;
  content:counter(nstep);
  position:absolute;
  left:12px;
  top:12px;
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:9999px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-weight:900;
  box-shadow:0 2px 6px rgba(16,24,40,.08);
}

/* Section color variants for number badges */
#bildung .nitem::before{
  background:#fff7ed; border-color:#fed7aa; color:#9a3412; /* apricot */
}
#qualitaet .nitem::before{
  background:#ecfdf5; border-color:#a7f3d0; color:#065f46; /* mint */
}
#nachhaltigkeit .nitem::before{
  background:#eff6ff; border-color:#bfdbfe; color:#1e40af; /* light blue */
}

    .nitem:hover{box-shadow:var(--shadow-md); transform:translateY(-1px)}
    .nitem b{display:block;margin-bottom:2px;color:var(--ink);white-space:nowrap;}

    /* Boss block */
    .boss{
      display:grid; gap:22px; grid-template-columns:320px 1fr; align-items:center;
      background:linear-gradient(96deg,#FFEDD6 52%, #E6F8EE 100%);
      padding:clamp(24px,6vw,48px); border-radius:22px; max-width:1060px; margin:0 auto;
      box-shadow:var(--shadow-lg);
    }
    .boss img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:18px; border:6px solid #fff; box-shadow:0 14px 44px rgba(234,88,12,.18)}
    .boss h3{margin:0 0 6px; color:var(--brand); font-weight:900; text-align:left}
    .boss p{margin:0}
    @media(max-width:980px){.boss{grid-template-columns:1fr; text-align:center} .boss h3{text-align:center}}

    /* (entfernt) Floating menu */
/* Animations */
    @keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
    .reveal{opacity:0; animation:fadeUp .55s ease forwards}
    .reveal:nth-child(1){animation-delay:.06s} .reveal:nth-child(2){animation-delay:.14s} .reveal:nth-child(3){animation-delay:.22s}
    @media(prefers-reduced-motion:reduce){
      .reveal{opacity:1; animation:none}
      .layer{position:fixed}
    }
#grusswort .boss img{max-width:320px; width:100%; height:auto; display:block; margin:0 auto; border-radius:12px; border:4px solid #f97316; box-shadow:0 4px 16px rgba(0,0,0,.15); object-fit:contain; aspect-ratio:auto;}

@media (max-width:1024px){#grusswort .boss img{max-width:300px}}
@media (max-width:768px){#grusswort .boss img{max-width:260px}}

@media (min-width:981px){#grusswort .boss{grid-template-columns:340px 1fr}}
@media (min-width:1200px){#grusswort .boss{grid-template-columns:360px 1fr}}

@media (max-width:768px){#grusswort .boss{grid-template-columns:1fr;}}

main#main > section:last-of-type{padding-bottom:48px}

@media (max-width:768px){main#main > section:last-of-type{padding-bottom:32px}}

/* Grußzeile zentrieren, ohne andere H3 zu beeinflussen */
#grusswort .boss h3{ text-align:center; }



/* === Appeal-Karte mit apricot Schatten === */
.appeal-card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 18px rgba(242, 140, 40, 0.35);
}

/* === Remove inner gray box around text inside appeal-card === */

/* === Appeal-Karte (elegant, apricot shadow) === */
.appeal-card{
  background:#fff;
  padding: clamp(16px, 3vw, 24px) clamp(18px, 4vw, 32px);
  margin: clamp(16px, 3vw, 28px) auto;
  max-width: 75ch;
  border: none;
  border-radius: 12px;
  box-shadow: 4px 4px 15px rgba(242,140,40,.22);
  text-align: center;
  transition: transform .24s ease, box-shadow .24s ease;
  will-change: transform, box-shadow;
}
.appeal-card:hover{ transform: translateY(-3px); box-shadow: 6px 6px 18px rgba(242,140,40,.32); }
.appeal-card .prose{ margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }

/* === Karten: Premium-Scroll-Effekt (sanftes Fade+Lift, ohne JS) === */
.reveal .card,
.reveal .appeal-card{
  opacity:0;
  transform: translateY(10px);
  animation: fadeUp .6s ease forwards;
}
.reveal .card{ animation-delay:.10s; }
.reveal .appeal-card{ animation-delay:.14s; }

/* === Mobiles Spacing reduzieren === */
@media (max-width: 768px){
  section{ padding: 56px 0; }
  .appeal-card{ padding: 14px 18px; margin: 16px auto; max-width: 82ch; }
  .grid{ gap: 20px; }
}
@media (max-width: 480px){
  header.hero{ padding: 110px 0 72px; }
  section{ padding: 48px 0; }
  .appeal-card{ padding: 12px 16px; margin: 14px auto; border-radius: 10px; }
}


/* === Footer Fixes: überschreibe Seitencss-Effekte im Footer === */
footer .grid,
.site-footer .grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

footer section,
.site-footer section {
  padding: 0;
  text-align: left;
}


@media (min-width:1024px){
  /* Equal height for number-card lists (right column) */
  .grid > .nlist{
    display:grid;
    grid-template-rows: repeat(3, 1fr);
    gap:18px;
  }
  .grid > .nlist > .nitem{ height:100%; }
}

@media (min-width:1024px){/* equal-height min */
  .grid{ gap:20px; }
  .grid > .nlist{ display:flex; flex-direction:column; gap:16px; }
  .grid > .nlist > .nitem{ min-height:88px; display:block; }
}


  .nlist{ gap:12px; }
  .nitem{ padding:12px 14px 12px 50px; min-height:84px; }
  .nitem::before{ left:12px; top:12px; width:26px; height:26px; }
  main#main > section{ padding:56px 0; }
}


  .nlist{ gap:14px; }
  .nitem{ min-height:92px; }
  main#main > section{ padding:64px 0; }
}

/* Tablet */
@media (min-width:481px) and (max-width:980px){
  .grid{ gap:20px; }
  .nlist{ gap:14px; }
  .nitem{ padding:14px 16px 14px 56px; min-height:92px; }
  .nitem::before{ left:16px; top:14px; width:28px; height:28px; }
  main#main > section{ padding:64px 0; }
}

/* Desktop ≥981 */
@media (min-width:981px){
  .grid{ gap:18px; }
  .nlist{ gap:16px; }
  .nitem{ padding:14px 16px 14px 56px; min-height:92px; }
  .nitem::before{ left:16px; top:14px; width:28px; height:28px; }
}

/* Wide ≥1280 */
@media (min-width:1280px){
  .grid{ gap:20px; }
  .nlist{ gap:16px; }
  .nitem{ min-height:96px; }
}