/* Geteiltes Layout: Reset, Kopf/Burgermenü, Footer, Label.
   Auf JEDER Seite eingebunden (Auftrag Abschnitt 5.1) — eine Quelle statt
   Duplikat in fünf Dateien. Seiten-spezifische Styles bleiben pro Seite. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Yaldevi Colombo', sans-serif;
  background: var(--weiss);
  color: var(--text);
  overflow-x: hidden;
}

a { font-family: inherit; }

.label { font-size: 17px; font-weight: 600; color: var(--apricot); margin-bottom: 6px }

/* ── KOPF (auf jeder Seite gleich) ── */
.kopf {
  position: sticky; top: 0; z-index: 100; padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
}
.logo { font-size: 21px; font-weight: 700; color: var(--blau); text-decoration: none; cursor: pointer }

.burger { background:none;border:0;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;z-index:210 }
.burger span { width:26px;height:2px;background:var(--blau);display:block;transition:transform .25s,opacity .2s }
.burger.auf span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger.auf span:nth-child(2) { opacity: 0 }
.burger.auf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
.burger:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px }

.schleier {
  position: fixed; inset: 0; background: rgba(26,26,26,0.35); opacity: 0;
  pointer-events: none; transition: opacity .25s; z-index: 190;
}
.schleier.auf { opacity: 1; pointer-events: auto }

.menue {
  position: fixed; top: 0; right: 0; height: 100vh; width: 320px; max-width: 84vw;
  background: var(--weiss); box-shadow: -14px 0 44px rgba(0,0,0,0.12);
  transform: translateX(100%); transition: transform .3s ease; z-index: 200;
  padding: 96px 36px 36px; display: flex; flex-direction: column;
  justify-content: flex-start; overflow-y: auto;
}
.menue.auf { transform: translateX(0) }
.menue a {
  flex: 0 0 auto; font-size: 17px; font-weight: 400; color: var(--blau);
  text-decoration: none; padding: 15px 0; border-bottom: 1px solid var(--kachel-rahmen); cursor: pointer;
}
.menue a:hover, .menue a.aktiv { color: var(--apricot) }
.menue a:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px }

footer { background: var(--blau) }
.footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 26px 48px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.footer-links { display: flex; gap: 28px; flex-wrap: wrap }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.85); text-decoration: none; cursor: pointer }
.footer-links a:hover, .footer-links a.aktiv { color: var(--apricot) }
.footer-links a:focus-visible { outline: 3px solid var(--apricot); outline-offset: 2px }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.65); width: 100%; text-align: right }

@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

@media (max-width: 640px) {
  .kopf { padding: 14px 20px }
  .footer-inner { padding: 24px 20px }
  .footer-copy { text-align: left }
}