/* =========================================================================
   DESIGN „KLASSIK" (Variante D)
   Das Layout der Vorgängerseite: rote Markenspalte links, dunkelgrauer
   Grund, weiße Inhaltsfläche, roter Fußbalken.
   Neu gegenüber früher: flexible Breiten statt 977-Pixel-Tabelle,
   echte Mobilansicht und fließende Schriftgrößen.
   Wird zusätzlich zu style.css geladen.
   ========================================================================= */

:root{
  --klassik-bg:#353434;      /* Seitengrund der alten Seite */
  --klassik-menu:#2c2c2c;    /* Farbe der alten Menü-Schaltflächen */
  --sidebar:280px;
}

body{background:var(--klassik-bg)}

/* ---- Grundgerüst: Markenspalte + Inhalt, ab 1000 px ---- */
@media (min-width:1000px){
  body{
    display:grid;
    grid-template-columns:1fr var(--sidebar) minmax(0,940px) 1fr;
    grid-template-rows:auto auto;
    align-items:stretch;
  }
  .skip-link,.to-top{grid-area:1/1}
  .site-header{grid-column:2;grid-row:1;background:var(--red);position:relative;border:0;backdrop-filter:none}
  .site-header__inner{display:block;width:auto;min-height:0;padding:0;position:sticky;top:0}
  main{grid-column:3;grid-row:1;background:#fff;min-height:100vh}
  .site-footer{grid-column:1/-1;grid-row:2}

  .nav-toggle{display:none}
  .nav{position:static;display:block;background:transparent;padding:0 0 1.25rem;max-height:none;box-shadow:none;border:0}
  .nav a{
    display:block;padding:.9rem 1.15rem;border-radius:0;font-size:.98rem;
    color:#e8e8e8;background:var(--klassik-menu);border-bottom:1px solid #3f3e3e;box-shadow:none;
  }
  .nav a:hover{background:#1e1e1e;color:#fff}
  .nav a[aria-current="page"]{background:#fff;color:var(--red);font-weight:700;box-shadow:none}
  .nav .btn{margin:1.25rem 1.1rem 0;display:flex}
  .nav a.btn--primary,.nav a.btn--primary:hover{border-bottom:0}

  main .wrap{width:auto;margin:0;padding-inline:clamp(1.5rem,3vw,3rem)}
  .section{padding-block:clamp(2rem,3.5vw,3.25rem)}
}

/* ---- Markenblock: rot, mit großem Wappen wie in der alten Logospalte ---- */
.brand{
  background:var(--red);
  flex-direction:column;text-align:center;gap:.7rem;
  padding:clamp(1.1rem,2vw,1.6rem) 1.25rem;
}
.brand::before{
  content:"";display:block;
  width:clamp(96px,13vw,170px);aspect-ratio:242/236;margin:0 auto;
  background:url("../img/msb-logo.png") no-repeat center/contain;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
.brand__name{font-size:clamp(1rem,1.3vw,1.16rem);color:#fff}
.brand__sub{color:#fff;opacity:.95;letter-spacing:.09em}

/* ---- Unter 1000 px: rote Kopfleiste, Menü als Überlagerung ---- */
@media (max-width:999px){
  .site-header{background:var(--red);border-bottom:4px solid var(--red-dark);backdrop-filter:none}
  .site-header__inner{min-height:76px}
  .brand{background:transparent;flex-direction:row;text-align:left;padding:.5rem 0;gap:.8rem}
  .brand::before{width:54px;margin:0}
  .nav{background:var(--red-dark)}
  .nav a{border-bottom-color:rgba(255,255,255,.25)}
  .nav a[aria-current="page"]{box-shadow:none;font-weight:700}
  .nav-toggle{border-color:rgba(255,255,255,.5)}
  main{background:#fff}
}

/* ---- Seitenkopf im Stil des alten Titelbalkens ---- */
.hero,.pagehead{
  background:linear-gradient(180deg,#f1f1f1 0%,#fbfbfb 60%,#fff 100%);
  color:var(--text);border-bottom:1px solid var(--line);
  padding-block:clamp(1.5rem,3vw,2.5rem);overflow:visible;
}
.hero::before,.hero::after,.pagehead::before,.pagehead::after{display:none}
.hero h1,.pagehead h1{
  color:var(--text);border-left:6px solid var(--red);padding-left:.85rem;
  font-size:clamp(1.55rem,1rem + 2vw,2.5rem);max-width:none;
}
.hero h1 em{color:var(--red)}
.hero__text,.pagehead p,.hero .lead{color:var(--text-2)}
.hero__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
.hero__mark{display:none}          /* das Wappen steht bereits in der Spalte */
.pagehead > .wrap::after{display:none}
.crumbs,.crumbs a{color:var(--text-2)}
.crumbs [aria-current]{color:var(--text)}
.crumbs li+li::before{color:#9aa1ab}
.eyebrow{color:var(--red)}

.badge{background:#fff;border-color:var(--line);color:var(--text)}
.badge svg{color:var(--red)}
.hero .btn--ghost{color:var(--text);border-color:#c4cad3}
.hero .btn--ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--red)}

.stats{background:var(--line);border-color:var(--line);margin-top:1.75rem}
.stats div{background:#fafbfc}
.stats dt,.stats dd span{color:var(--text-2)}
.stats dd{color:var(--text)}

/* ---- Inhalt: durchgehend hell wie im weißen Inhaltsrahmen früher ---- */
.section--alt{background:#f6f6f7}
.section--dark{background:#f6f6f7;color:var(--text)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--text)}
.section--dark p,.section--dark li,.section--dark .lead{color:var(--text-2)}
.section--dark .card{background:#fff;border-color:var(--line)}
.section--dark .card p,.section--dark .card li,.section--dark .contact-list b{color:var(--text-2)}
.section--dark .card h3 a{color:var(--text)}
.section--dark .icon{background:rgba(190,22,39,.09);color:var(--red)}
.section--dark .eyebrow{color:var(--red)}
.section--dark .eyebrow::before{background:var(--red)}
.section--dark .checks li::before{border-color:var(--red)}
.section--dark .btn--ghost{color:var(--text);border-color:#c4cad3}
.section--dark .contact-list a{color:var(--red)}
.figure-plate{background:linear-gradient(150deg,#3b3a3a,#2a2929)}

/* Roter Marker vor Überschriften – die alte „Willkommen"-Leiste */
.sec-head h2,.legal h2{border-left:5px solid var(--red);padding-left:.9rem;margin-left:0}

/* ---- Fußzeile: dunkelgrau mit rotem Abschlussbalken ---- */
.site-footer{background:var(--klassik-menu);border-top:4px solid var(--red)}
.footer-bottom{
  background:var(--red);border-top:none;margin-top:1rem;padding:1rem 0;
  width:auto;margin-left:0;padding-inline:clamp(1.25rem,3vw,2rem);
}
.footer-bottom,.footer-bottom p,.footer-bottom span,.footer-bottom a{color:#fff}
.footer-brand img{width:84px}

/* Kontakt-Schaltfläche in der Spalte hebt sich vom Menü ab */
.nav a.btn--primary{background:#fff;color:var(--red);border-color:#fff;font-weight:700}
.nav a.btn--primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Bilder im Inhalt: heller Rahmen wie auf der Vorgängerseite */
.section--dark .bild{background:#fff;border-color:var(--line)}
.section--dark .bild figcaption{color:var(--text-2)}