/* ============================================================
   Schulanfang-Unterseite – Parnack
   Zwei Zonen: .sa-standard (bleibt dauerhaft)
               .sa-jahr     (jährlich austauschbar)
   Farben: Rot #b02b2c · Grün #83a846 · Gelb #efbb20 · Hellgrün #c2d851
   ============================================================ */

#top .sa-page{ font-size:16px; }
#top .sa-page h1,
#top .sa-page h2,
#top .sa-page h3{ margin:0 0 .5em 0; }
#top .sa-page p{ margin:0 0 1em 0; }
#top .sa-page p:last-child{ margin-bottom:0; }
#top .sa-page img{ display:block; max-width:100%; height:auto; }

/* --- Abschnitte ------------------------------------------------ */
.sa-section{ padding:38px 0; border-top:1px solid #e6e8dc; }
.sa-section:first-child{ border-top:none; }
.sa-section--tint{ background:#f7f8f1; padding:38px 24px; }
.sa-kicker{ font-family:'oswald-v49-latin',sans-serif; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:#4c6425; margin:0 0 10px 0; }
.sa-lead{ color:#555; }

/* --- Hero ------------------------------------------------------ */
.sa-hero{ display:flex; gap:34px; align-items:center; padding-top:8px; }
.sa-hero__text{ flex:1 1 52%; }
.sa-hero__media{ flex:1 1 48%; position:relative; }
#top .sa-hero__text h1{ font-size:34px; line-height:1.15em; color:#b02b2c; margin-bottom:14px; }
.sa-hero__claim{ font-size:17px; line-height:1.6em; }
.sa-hero__badge{ position:absolute; left:-14px; bottom:-14px; background:#efbb20; color:#333;
  font-family:'oswald-v49-latin',sans-serif; font-size:14px; padding:9px 14px; }

/* --- Checkliste ------------------------------------------------ */
.sa-checks{ list-style:none; margin:0 0 24px 0; padding:0; }
.sa-checks li{ display:flex; gap:10px; align-items:flex-start; margin:0 0 9px 0; }
.sa-checks li:before{ content:"✓"; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:#4c6425; color:#fff; font-size:12px; line-height:20px; text-align:center; font-weight:700; }

/* --- Buttons --------------------------------------------------- */
#top .sa-btn{ display:inline-block; background:#b02b2c; color:#fff;
  font-family:'oswald-v49-latin',sans-serif; font-size:15px; letter-spacing:.5px;
  padding:13px 22px; text-decoration:none; border:none; }
#top .sa-btn:hover{ background:#8d0000; color:#fff; text-decoration:none; }
#top .sa-btn--ghost{ background:none; color:#4c6425; border:2px solid #83a846; padding:11px 20px; }
#top .sa-btn--ghost:hover{ background:#83a846; color:#fff; }
#top .sa-btn--green{ background:#4c6425; font-size:14px; padding:9px 16px; }
#top .sa-btn--green:hover{ background:#3a4d1c; }
.sa-btnrow{ display:flex; flex-wrap:wrap; gap:12px; }

/* --- 3 Schritte ------------------------------------------------ */
.sa-steps{ display:flex; gap:24px; }
.sa-steps__item{ flex:1; background:#fff; border-top:4px solid #b02b2c; padding:22px 20px; }
.sa-steps__num{ width:40px; height:40px; border-radius:50%; background:#b02b2c; color:#fff;
  font-family:'oswald-v49-latin',sans-serif; font-size:20px; line-height:40px; text-align:center;
  margin-bottom:14px; }
#top .sa-steps__item h3{ font-size:19px; color:#2c353d; }
.sa-steps__item p{ font-size:15px; }

/* --- Leistungen ------------------------------------------------ */
.sa-services{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:14px 30px; }
.sa-services li{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:#f7f8f1; }
.sa-services li:before{ content:"✓"; flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:#4c6425; color:#fff; font-size:13px; line-height:22px; text-align:center; font-weight:700; }

/* --- Alles vor Ort --------------------------------------------- */
.sa-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
#top .sa-tiles img{ width:100%; height:170px; object-fit:cover; }
#top .sa-tiles h3{ font-size:17px; color:#2c353d; margin:12px 0 6px 0; }
.sa-tiles p{ font-size:14px; }

/* --- Jahresblock ----------------------------------------------- */
.sa-jahr{ border:3px solid #83a846; background:#f3f7e4; margin:8px 0 0 0; }
.sa-jahr__head{ background:#4c6425; color:#fff; padding:12px 22px; display:flex; flex-wrap:wrap;
  gap:12px; align-items:baseline; justify-content:space-between; }
.sa-jahr__head strong{ font-family:'oswald-v49-latin',sans-serif; font-size:20px;
  font-weight:400; letter-spacing:.5px; }
.sa-jahr__head span{ font-size:13px; }
.sa-jahr__body{ padding:26px 22px; }
.sa-jahr__body + .sa-jahr__body{ padding-top:0; }
#top .sa-jahr h2{ font-size:24px; color:#2c353d; }
.sa-brands{ font-size:15px; color:#555; }
.sa-note{ margin:10px 0 0 0; font-size:12px; color:#595959; }

/* Prospekt-Galerie */
.sa-gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:22px 0 0 0; }
.sa-gallery a{ display:block; border:1px solid #cfd8b2; background:#fff; }
.sa-gallery a:hover{ border-color:#83a846; }
.sa-gallery img{ width:100%; }

/* duoSchulbox */
.sa-box{ border-top:2px dashed #b6c785; padding-top:24px; }
.sa-box__layout{ display:flex; gap:22px; align-items:flex-start; }
.sa-box__media{ flex:0 0 36%; display:flex; flex-direction:column; gap:12px; }
.sa-box__media img{ border:1px solid #cfd8b2; width:100%; }
.sa-box__list{ flex:1 1 64%; background:#fff; border:1px solid #cfd8b2; }
.sa-box__row{ display:grid; grid-template-columns:38% 62%; font-size:14px; border-top:1px solid #e6ecd4; }
.sa-box__row:nth-child(even){ background:#fafcf3; }
.sa-box__row > span{ padding:8px 12px; }
.sa-box__head{ display:grid; grid-template-columns:38% 62%; background:#eaf0d6; border-top:none;
  font-family:'oswald-v49-latin',sans-serif; font-size:13px; letter-spacing:.5px;
  text-transform:uppercase; color:#4c6425; }
.sa-box__head > span{ padding:9px 12px; }
.sa-box__sum{ display:flex; justify-content:space-between; align-items:center; gap:14px;
  border-top:2px solid #83a846; padding:12px; background:#eaf0d6; }
.sa-box__sum strong{ font-family:'oswald-v49-latin',sans-serif; font-size:16px;
  font-weight:400; color:#4c6425; }

/* --- FAQ ------------------------------------------------------- */
.sa-faq{ display:flex; flex-direction:column; gap:10px; }
.sa-faq details{ background:#fff; border-left:4px solid #b02b2c; }
.sa-faq summary{ cursor:pointer; padding:14px 18px; list-style:none;
  font-family:'oswald-v49-latin',sans-serif; font-size:18px; color:#2c353d;
  display:flex; justify-content:space-between; gap:14px; align-items:center; }
.sa-faq summary::-webkit-details-marker{ display:none; }
.sa-faq summary:hover{ background:#faf7f2; }
.sa-faq summary:after{ content:"+"; color:#b02b2c; font-size:20px; line-height:1; }
.sa-faq details[open] summary:after{ content:"–"; }
.sa-faq p{ margin:0; padding:0 18px 16px 18px; font-size:15px; }

/* --- Beratung / Kontakt ---------------------------------------- */
.sa-contact{ display:flex; gap:30px; align-items:stretch; }
.sa-contact__text{ flex:1 1 56%; }
#top .sa-contact__text h2{ font-size:26px; color:#b02b2c; }
.sa-card{ flex:1 1 44%; background:#c2d851; padding:24px 22px; color:#333; }
#top .sa-card h3{ font-family:'oswald-v49-latin',sans-serif; font-size:17px; text-transform:uppercase;
  letter-spacing:1px; color:#333; }
.sa-card p{ font-size:15px; }
#top .sa-card a{ color:#333; text-decoration:underline; }
.sa-hours{ border-top:1px solid #a8bd42; padding-top:12px; font-size:15px; }
.sa-hours div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.sa-card__hint{ margin-top:12px; font-size:13px; }

/* --- Sortiments-Kacheln (Schulbedarf) --------------------------- */
.sa-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sa-cat{ background:#fff; border:1px solid #e6e8dc; }
.sa-cat__media{ position:relative; width:100%; height:150px; }
.sa-cat__body{ padding:14px 16px 16px 16px; }
#top .sa-cat h3{ font-size:17px; color:#2c353d; margin:0 0 6px 0; }
.sa-cat p{ font-size:14px; margin:0; }

/* --- Hinweis-/Aktionskasten ------------------------------------- */
.sa-panel{ background:#fdf6e0; border-left:6px solid #efbb20; padding:22px 24px; }
.sa-panel--green{ background:#f3f7e4; border-left-color:#83a846; }
#top .sa-panel h2, #top .sa-panel h3{ margin-top:0; }
.sa-panel ul{ margin:0 0 0 1.1em; padding:0; }
.sa-panel li{ margin-bottom:6px; }

/* --- Zwei Spalten Text/Bild ------------------------------------- */
.sa-split{ display:flex; gap:30px; align-items:center; }
.sa-split__text{ flex:1 1 55%; }
.sa-split__media{ flex:1 1 45%; position:relative; min-height:260px; }

/* --- Hub-Links -------------------------------------------------- */
.sa-hub{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
#top .sa-hub a{ display:block; background:#f7f8f1; border-top:4px solid #b02b2c;
  padding:20px; text-decoration:none; color:#333; }
#top .sa-hub a:hover{ background:#f0f2e5; text-decoration:none; }
.sa-hub strong{ display:block; font-family:'oswald-v49-latin',sans-serif; font-size:18px;
  font-weight:400; color:#b02b2c; margin-bottom:6px; }
.sa-hub span{ font-size:14px; }

/* --- Jahresblock-Teaser (auf Schulanfang) ----------------------- */
.sa-teaser{ display:flex; gap:22px; align-items:center; }
.sa-teaser__thumb{ flex:0 0 150px; border:1px solid #cfd8b2; background:#fff; }
.sa-teaser__text{ flex:1 1 auto; }

/* --- Responsiv -------------------------------------------------- */
@media only screen and (max-width:989px){
  .sa-cats{ grid-template-columns:repeat(2,1fr); }
  .sa-gallery{ grid-template-columns:repeat(3,1fr); }
  .sa-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media only screen and (max-width:767px){
  .sa-hero, .sa-steps, .sa-box__layout, .sa-contact, .sa-split, .sa-teaser{ flex-direction:column; }
  .sa-cats, .sa-hub{ grid-template-columns:1fr; }
  .sa-teaser__thumb{ flex:0 0 auto; max-width:200px; }
  .sa-hero__badge{ position:static; display:inline-block; margin-top:10px; }
  .sa-services{ grid-template-columns:1fr; }
  .sa-gallery{ grid-template-columns:repeat(2,1fr); }
  .sa-box__row, .sa-box__head{ grid-template-columns:1fr; }
  .sa-box__row > span:first-child{ padding-bottom:0; }
  #top .sa-hero__text h1{ font-size:26px; }
}