/* sicherimalltag.ch – Basis-Stylesheet für alle Seiten */

:root{
  --bg: #FBF7EE;
  --bg-white: #FFFFFF;
  --ink: #142A4D;
  --ink-soft: #3C5271;
  --green: #2F7D45;
  --green-dark: #1F5A31;
  --green-light: #E7F3E9;
  --line: #E4DCC6;
  --ad-bg: #F0ECDF;
  --ad-border: #C9BF9F;
  --focus: #0B4F8A;
  --red: #B3261E;
  --red-dark: #8C1D17;
  --red-light: #FBE7E5;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Atkinson Hyperlegible', Arial, sans-serif;
  font-size:20px;
  line-height:1.65;
}

h1,h2,h3{ color:var(--ink); line-height:1.3; }
a{ color:var(--green-dark); }

*:focus-visible{ outline:4px solid var(--focus); outline-offset:3px; }

img{ max-width:100%; height:auto; }

/* ---------- Kopfbereich ---------- */
.site-header{
  background:var(--bg-white);
  border-bottom:2px solid var(--line);
  padding:1rem 1.2rem;
}
.header-inner{
  max-width:70rem;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.logo-link{ display:flex; align-items:center; }
.logo-link img{ height:5.6rem; width:auto; display:block; }

.main-nav{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
}
.main-nav a{
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:1.05rem;
  padding:0.6rem 1rem;
  border-radius:0.6rem;
}
.main-nav a:hover, .main-nav a.active{
  background:var(--green-light);
  color:var(--green-dark);
}
.main-nav a.nav-emergency{
  color:var(--red-dark);
  background:var(--red-light);
}
.main-nav a.nav-emergency:hover, .main-nav a.nav-emergency.active{
  background:var(--red);
  color:#fff;
}

/* ---------- Werbe-Platzhalter ---------- */
.ad-slot{
  background:var(--ad-bg);
  border:2px dashed var(--ad-border);
  border-radius:0.8rem;
  color:var(--ink-soft);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:1.6rem auto;
  padding:0.8rem;
}
.ad-slot .ad-label{
  font-size:0.85rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:700;
  opacity:0.75;
}
.ad-slot .ad-size{ font-size:0.8rem; opacity:0.6; margin-top:0.2rem; }

.ad-top{ max-width:728px; width:100%; min-height:90px; }
.ad-sidebar{ width:100%; max-width:300px; min-height:600px; }
.ad-in-article{ max-width:300px; width:100%; min-height:250px; }

/* ---------- Layout ---------- */
.page-wrap{ max-width:70rem; margin:0 auto; padding:1.6rem 1.2rem 3rem; }
.center{ display:flex; justify-content:center; }

.breadcrumb{ font-size:0.95rem; color:var(--ink-soft); margin-bottom:1rem; }
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------- Startseite ---------- */
.hero{ text-align:center; padding:1.6rem 0 1rem; }
.hero h1{ font-size:2.2rem; margin:0 0 0.7rem; }
.hero p{ font-size:1.15rem; color:var(--ink-soft); max-width:42rem; margin:0 auto; }

.os-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  max-width:38rem;
  margin:2rem auto 0;
}
@media(max-width:32rem){ .os-grid{ grid-template-columns:1fr; } }

.os-card{
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:1.2rem;
  padding:2rem 1.6rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
  height:100%;
}
.os-card .btn{ margin-top:auto; }
.os-card h2{ font-size:1.6rem; margin:0; }
.os-card p{ margin:0; color:var(--ink-soft); font-size:1.05rem; }
.os-icon{ width:4.4rem; height:4.4rem; }
.os-icon-slot{ height:4.4rem; display:flex; align-items:center; justify-content:center; }
.os-icon-group{ display:flex; align-items:center; justify-content:center; gap:0.6rem; height:4.4rem; }
.os-icon-badge{
  width:2.8rem;
  height:2.8rem;
  background:var(--green-light);
  border-radius:0.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.os-icon-badge svg{ width:1.7rem; height:1.7rem; }

.btn{
  display:inline-block;
  background:var(--green);
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  font-size:1.1rem;
  padding:0.9rem 1.6rem;
  border-radius:0.8rem;
  margin-top:0.4rem;
}
.btn:hover{ background:var(--green-dark); }

/* ---------- Magazin-Layout (Kategorie-Übersicht) ---------- */
.magazine{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2rem;
  align-items:start;
}
@media(max-width:52rem){ .magazine{ grid-template-columns:1fr; } .ad-sidebar{ margin:1.6rem auto; } }

.category-block{ margin-bottom:2.2rem; }
.category-block h2{
  font-size:1.5rem;
  border-bottom:3px solid var(--green);
  padding-bottom:0.4rem;
  margin-bottom:1rem;
}
.article-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.8rem; }
.article-list li a{
  display:block;
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:0.8rem;
  padding:1rem 1.2rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:1.08rem;
}
.article-list li a:hover{ border-color:var(--green); color:var(--green-dark); }
.article-list li p{ margin:0.3rem 0 0; font-weight:400; color:var(--ink-soft); font-size:0.98rem; }

.sidebar{ position:sticky; top:1.2rem; display:flex; flex-direction:column; align-items:center; }

/* ---------- Artikel-Seiten ---------- */
.article-header{ margin-bottom:1.4rem; }
.article-header h1{ font-size:1.9rem; margin:0 0 0.5rem; }
.article-header .lead{ font-size:1.15rem; color:var(--ink-soft); }

.step-block{
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:1rem;
  padding:1.3rem 1.4rem;
  margin-bottom:1.2rem;
  display:flex;
  gap:1.1rem;
  align-items:flex-start;
}
.step-num{
  flex-shrink:0;
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.15rem;
}
.step-text{ font-size:1.08rem; padding-top:0.1rem; }

.image-placeholder{
  background:var(--green-light);
  border:2px dashed #B7D4BC;
  border-radius:0.8rem;
  padding:2.4rem 1rem;
  text-align:center;
  color:var(--green-dark);
  font-weight:700;
  margin:1rem 0 1.6rem;
}

.tip-box{
  background:#FBEFDC;
  border:2px solid #EFCB93;
  border-radius:1rem;
  padding:1.2rem 1.4rem;
  margin-top:1.6rem;
}
.tip-box strong{ color:#B4661A; }
.tip-box p{ margin:0.3rem 0 0; font-size:1.02rem; }

.article-nav{ display:flex; justify-content:space-between; margin-top:2rem; flex-wrap:wrap; gap:1rem; }

/* ---------- Lexikon ---------- */
.glossary-search{
  width:100%;
  font-size:1.1rem;
  padding:0.9rem 1.1rem;
  border:2px solid var(--line);
  border-radius:0.8rem;
  margin-bottom:1.8rem;
  font-family:inherit;
}
.glossary-letter{
  font-size:1.6rem;
  color:var(--green-dark);
  border-bottom:2px solid var(--green);
  padding-bottom:0.3rem;
  margin:1.8rem 0 1rem;
}
.glossary-entry{
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:0.8rem;
  padding:1.1rem 1.3rem;
  margin-bottom:0.8rem;
}
.glossary-entry dt{ font-weight:700; font-size:1.1rem; color:var(--ink); }
.glossary-entry dd{ margin:0.3rem 0 0; color:var(--ink-soft); }

/* ---------- Neue Lektionsseiten (windows-erste-schritte etc.) ---------- */
.adsense-banner{
  background:var(--ad-bg);
  border:2px dashed var(--ad-border);
  border-radius:0.8rem;
  color:var(--ink-soft);
  text-align:center;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:0.95rem;
  padding:1.3rem 1rem;
  margin:1.6rem auto;
  max-width:728px;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.themen-liste{ list-style:none; margin:1.4rem 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.kurs-button{
  display:block;
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:0.9rem;
  padding:1.1rem 1.4rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:1.1rem;
}
.kurs-button:hover{ border-color:var(--green); color:var(--green-dark); background:var(--green-light); }

.zurueck-button{
  display:inline-block;
  background:var(--ink-soft);
  color:#fff !important;
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  padding:0.85rem 1.4rem;
  border-radius:0.8rem;
  margin-top:0.6rem;
}
.zurueck-button:hover{ background:var(--ink); }

.anleitung-schritt{
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:1rem;
  padding:1.4rem 1.5rem;
  margin-bottom:1.4rem;
}
.anleitung-schritt h2{ font-size:1.3rem; margin:0 0 0.6rem; color:var(--green-dark); }
.anleitung-schritt p{ font-size:1.08rem; margin:0; }

.bild-platzhalter{
  background:var(--green-light);
  border:2px dashed #B7D4BC;
  border-radius:0.8rem;
  padding:2rem 1rem;
  text-align:center;
  color:var(--green-dark);
  font-weight:700;
  margin-top:1rem;
}

/* ---------- Notfallseite ---------- */
.notfall-liste{ list-style:none; margin:1.6rem 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.notfall-eintrag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  background:var(--bg-white);
  border:2px solid var(--line);
  border-radius:1rem;
  padding:1.2rem 1.4rem;
  flex-wrap:wrap;
}
.notfall-info h2{ font-size:1.2rem; margin:0 0 0.2rem; }
.notfall-info p{ margin:0; color:var(--ink-soft); font-size:1rem; }
.notfall-qr-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  text-decoration:none;
  flex-shrink:0;
  padding:0.5rem;
  border-radius:0.8rem;
  border:2px solid var(--red);
  background:#fff;
}
.notfall-qr-link:hover{ background:var(--red-light); }
.notfall-qr{ display:block; width:5.2rem; height:5.2rem; }
.notfall-qr svg{ display:block; width:100%; height:100%; }
.notfall-qr-caption{
  font-weight:700;
  font-size:1rem;
  color:var(--red-dark);
  text-align:center;
  line-height:1.25;
}
.notfall-hinweis{
  background:var(--red-light);
  border:2px solid #EFC4BF;
  border-radius:1rem;
  padding:1.2rem 1.4rem;
  margin-bottom:1.6rem;
}
.notfall-hinweis strong{ color:var(--red-dark); }
.notfall-hinweis p{ margin:0.3rem 0 0; font-size:1.05rem; }

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:2rem 1rem;
  color:var(--ink-soft);
  font-size:0.95rem;
  border-top:2px solid var(--line);
  margin-top:2rem;
}
.site-footer a{ color:var(--ink-soft); }