.sg-st{--indigo:#141861;--orange:#FF8C00;--tinte:#1C1E26;--grau:#565B6E;
  --linie:#E4E6F5;--grund:#F6F7FB;--breite:1406px}
.sg-st{color:var(--tinte)}
.sg-st *{box-sizing:border-box}
.sg-st-bahn{max-width:var(--breite);margin-inline:auto;padding:0 20px}
.sg-st-abschnitt{padding:56px 0}
.sg-st-abschnitt--grund{background:var(--grund)}
.sg-st h2{margin:0 0 8px;font-size:30px;line-height:1.2;letter-spacing:-.5px;color:var(--indigo)}
.sg-st h3{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.3px;color:var(--indigo)}
.sg-st p{margin:0}
.sg-st-unter{max-width:72ch;font-size:18px;line-height:1.55;color:var(--grau)}
.sg-st-kopfblock{margin-bottom:28px}

/* Kopfband */
.sg-st-kopf{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:40px;align-items:center}
/*
 * ORANGE IST EIN AKZENT, KEINE ZWEITE HAUSFARBE (21.09.2026).
 *
 * Thomas, zweimal in derselben Nachricht: „Das Design soll nicht zu orange
 * lastig sein!" und „Und wie gesagt bitte nicht so orange lastig!"
 *
 * Gemessen war es dreimal auf der Startseite, und zwar genau an den drei
 * Stellen, auf die das Auge zuerst faellt: die Zeile ueber der Ueberschrift,
 * der grosse Knopf darunter und jedes Rabatt-Plaettchen im Aktionsblock.
 * Drei orange Flecken auf einer sonst indigoblauen Seite lesen sich nicht
 * als Akzent, sondern als zweite Marke.
 *
 * DIE REGEL AB JETZT: Indigo traegt, Orange zeigt. Orange bleibt an den
 * Stellen, an denen es eine Handlung ODER eine Auszeichnung markiert und
 * klein ist — der Fokusrahmen und das „Aktionen"-Feld im Menuefuss. Sonst
 * nirgends.
 */
.sg-st-kicker{margin-bottom:14px;font-size:17px;font-weight:600;color:var(--grau)}
.sg-st-kopf h1{margin:0 0 16px;font-size:40px;line-height:1.14;letter-spacing:-1px;color:var(--indigo)}
.sg-st-kopf__satz{max-width:56ch;font-size:19px;line-height:1.55;color:var(--grau)}
.sg-st-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.sg-st-knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 26px;border-radius:12px;
  font-size:18px;font-weight:600;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
/* Der Hauptknopf traegt jetzt Indigo. Damit der zweite Knopf daneben nicht
   gleich aussieht, verliert er den kraeftigen Rahmen und bekommt einen
   zarten — zwei gleich starke Knoepfe nebeneinander sind keine Rangfolge. */
.sg-st-knopf--voll{background:var(--indigo);color:#fff;
  box-shadow:0 6px 18px rgba(20,24,97,.22)}
.sg-st-knopf--voll:hover{background:#242a7d;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,24,97,.28)}
.sg-st-knopf--rand{background:#fff;color:var(--indigo);box-shadow:inset 0 0 0 1px var(--linie)}
.sg-st-knopf--rand:hover{box-shadow:inset 0 0 0 1px var(--indigo);background:#F6F7FB}
.sg-st-knopf--hell{background:#fff;color:var(--indigo)}
.sg-st-knopf--hell:hover{transform:translateY(-2px)}
.sg-st-kopf__bild{margin:0;border-radius:16px;overflow:hidden;line-height:0}
.sg-st-kopf__bild img{display:block;width:100%;height:388px;object-fit:cover}
.sg-st-kopf .sg-oz-heute{margin-top:22px}

/* Anlasskarten */
.sg-st-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
.sg-st-karte{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linie);border-radius:16px;padding:24px 24px 8px}
.sg-st-karte__satz{margin:10px 0 16px;font-size:17px;line-height:1.5;color:var(--grau)}
.sg-st-wege{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--linie)}
.sg-st-weg{border-bottom:1px solid var(--linie)}
.sg-st-weg:last-child{border-bottom:0}
.sg-st-weg a{display:flex;align-items:center;gap:12px;min-height:48px;
  padding:6px 0;text-decoration:none;color:var(--indigo);
  font-size:17px;font-weight:500;line-height:1.35}
.sg-st-weg__text{flex:1 1 auto}
.sg-st-weg__zusatz{flex:0 0 auto;font-size:17px;font-weight:600;color:var(--grau);
  font-variant-numeric:tabular-nums}
.sg-st-wege--kontakt{margin-top:18px;border-top:1px solid var(--linie)}
.sg-st-weg__pfeil{flex:0 0 auto;width:7px;height:7px;
  border-right:2px solid #BCC1DE;border-bottom:2px solid #BCC1DE;
  transform:rotate(-45deg);transition:border-color .15s ease,transform .15s ease}
.sg-st-weg a:hover .sg-st-weg__pfeil{border-color:var(--orange);transform:rotate(-45deg) translate(2px,2px)}
.sg-st-weg a:hover .sg-st-weg__text{text-decoration:underline;text-underline-offset:3px}

/* Montage-Band */
.sg-st-band{background:var(--indigo);color:#fff;padding:60px 0}
.sg-st-band h2{color:#fff}
.sg-st-band__satz{max-width:66ch;margin-top:10px;font-size:18px;line-height:1.55;
  color:rgba(255,255,255,.82)}
/* Text links, Foto rechts. Das Band war 540px hoch und ganz ohne Bild. */
.sg-st-band__kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:34px;align-items:center}
.sg-st-band__bild{margin:0;border-radius:16px;overflow:hidden;line-height:0}
.sg-st-band__bild img{display:block;width:100%;height:230px;object-fit:cover}
.sg-st-band__spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin:32px 0 28px}
.sg-st-saeule{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:22px}
.sg-st-saeule h3{color:#fff;font-size:19px}
.sg-st-saeule p{margin-top:8px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.8)}
.sg-st-saeule__zahl{display:inline-block;margin-top:14px;padding:6px 12px;
  background:rgba(255,255,255,.14);border-radius:8px;
  font-size:17px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}

/* Aktionen */
.sg-st-gitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sg-st-ware{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);
  border-radius:16px;overflow:hidden;text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.sg-st-ware:hover{border-color:var(--indigo);box-shadow:0 12px 28px rgba(20,24,97,.14);
  transform:translateY(-2px)}
.sg-st-ware__bild{position:relative;background:#fff;padding:18px;line-height:0}
.sg-st-ware__bild img{display:block;width:100%;height:190px;object-fit:contain}
/*
 * DAS PLAETTCHEN WAR ZEHN PIXEL HOCH.
 *
 * Thomas am 21.09.2026 zu diesem Block: „Dann das hier braucht einen fix!"
 *
 * Gemessen im Browser: der Kasten war 73 x 10 Pixel und trug 16px-Schrift.
 * Die Zahl stand also weit ausserhalb ihres eigenen Kastens und haengte
 * oben links aus der abgerundeten Ecke heraus.
 *
 * Grund: `.sg-st-ware__bild` setzt `line-height:0` — der uebliche Griff
 * gegen den Spalt unter einem Inline-Bild. Ein `<span>` darin erbt das,
 * und ein Inline-Element ohne Zeilenhoehe hat keine Hoehe. Das Auffuellen
 * mit Polsterung ergab die 10 Pixel.
 *
 * Die Reparatur ist `display:inline-flex` mit eigener Zeilenhoehe. Wer hier
 * je wieder `line-height` wegnimmt, bekommt dasselbe zurueck.
 */
.sg-st-plaettchen{position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:8px;
  background:var(--indigo);color:#fff;font-size:15px;font-weight:700;line-height:1;
  letter-spacing:.2px;font-variant-numeric:tabular-nums}
.sg-st-ware__text{padding:16px 18px 18px;border-top:1px solid #EDEFF7}
.sg-st-ware__marke{display:block;font-size:17px;font-weight:600;color:var(--grau)}
.sg-st-ware__name{display:block;margin-top:4px;font-size:17px;line-height:1.35;color:var(--tinte)}
/*
 * Der alte Preis steht OBEN und klein, der neue darunter und gross.
 * Nebeneinander las das Auge zuerst die durchgestrichene Zahl als den
 * Preis — ein Fehler, den man erst im Warenkorb bemerkt.
 */
.sg-st-ware__preise{display:block;margin-top:12px}
.sg-st-ware__alt{display:block;font-size:15px;line-height:20px;color:var(--grau);
  text-decoration:line-through;white-space:nowrap}
.sg-st-ware__neu{display:block;font-size:22px;line-height:29px;font-weight:700;color:var(--indigo);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-st-ware__mwst{display:block;font-size:14px;line-height:19px;color:var(--grau)}
.sg-st-mehr{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:24px;
  font-size:18px;font-weight:600;color:var(--indigo);text-decoration:none}
.sg-st-mehr:hover{text-decoration:underline;text-underline-offset:4px}

/* Marken */
.sg-st-marken{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:8px}
.sg-st-marke{display:flex;align-items:center;justify-content:center;height:78px;
  background:#fff;border:1px solid var(--linie);border-radius:12px;padding:12px;
  transition:border-color .15s ease,box-shadow .15s ease}
.sg-st-marke:hover{border-color:var(--indigo);box-shadow:0 6px 16px rgba(20,24,97,.1)}
.sg-st-marke img{max-width:100%;object-fit:contain}
.sg-st-abkuerzungen{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px}
.sg-st-abkuerzungen a{display:inline-flex;align-items:center;min-height:48px;
  font-size:17px;font-weight:500;color:var(--indigo);text-decoration:none}
.sg-st-abkuerzungen a:hover{text-decoration:underline;text-underline-offset:4px}

/* Besuch */
.sg-st-besuch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px;align-items:center}
.sg-st-besuch__bild{margin:0;border-radius:16px;overflow:hidden;line-height:0}
.sg-st-besuch__bild img{display:block;width:100%;height:360px;object-fit:cover}
.sg-st-adresse{margin-top:18px;font-size:18px;line-height:1.6;color:var(--tinte)}
.sg-st-adresse a{color:var(--indigo);font-weight:600}
.sg-st-team{margin-top:16px;font-size:17px;line-height:1.55;color:var(--grau)}
.sg-st-team a{color:var(--indigo)}
.sg-st-besuch .sg-oz-heute{margin:18px 0 6px}
/* Die Statuszeile kommt aus dem Oeffnungszeiten-Modul und ist dort 14 px.
   Auf der Startseite ist sie Fliesstext und muss 17 px haben. */
.sg-st .sg-oz-heute{display:flex;align-items:baseline;gap:9px;font-size:17px;line-height:1.45;
  flex-wrap:nowrap}
/* Ohne min-width:0 nimmt der Text die volle Breite und drueckt den Punkt
   auf eine eigene Zeile darueber. */
.sg-st .sg-oz-heute__text{flex:1 1 auto;min-width:0}
.sg-st .sg-oz-heute__text{font-size:17px;line-height:1.45}
.sg-st .sg-oz-heute__punkt{flex:0 0 auto;align-self:center}

/* Bereichskacheln */
.sg-st-bereiche{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;margin:0;padding:0}
.sg-st-bereich > a{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--linie);border-radius:16px;overflow:hidden;text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.sg-st-bereich > a:hover{border-color:var(--indigo);
  box-shadow:0 12px 28px rgba(20,24,97,.14);transform:translateY(-2px)}
.sg-st-bereich__feld{display:block;padding:18px;background:#fff;line-height:0}
.sg-st-bereich__bild{display:block;width:100%;height:190px;object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.sg-st-bereich > a:hover .sg-st-bereich__bild{transform:scale(1.06)}
.sg-st-bereich__leer{display:block;width:100%;height:190px;background:var(--grund);border-radius:8px}
.sg-st-bereich__name{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:15px 17px;border-top:1px solid #EDEFF7;
  font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-.15px;color:var(--indigo)}
.sg-st-bereich > a:hover .sg-st-weg__pfeil{border-color:var(--orange);
  transform:rotate(-45deg) translate(2px,2px)}

/* Staerken-Streifen „Service und Qualitaet seit 1987" */
.sg-st-staerken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;margin-top:30px}
.sg-st-staerke h3{margin:0;font-size:20px;line-height:1.3;color:var(--indigo)}
.sg-st-staerke p{margin:9px 0 0;font-size:17px;line-height:1.55;color:#4a4f66}
.sg-st-staerke__strich{display:block;width:38px;height:3px;margin-bottom:14px;
  border-radius:2px;background:var(--orange)}

@media (max-width:1100px){
  .sg-st-bereiche{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sg-st-marken{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sg-st-gitter{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .sg-st-kopf,.sg-st-besuch,.sg-st-band__kopf{grid-template-columns:minmax(0,1fr);gap:26px}
  .sg-st-kopf h1{font-size:30px;letter-spacing:-.6px}
  .sg-st h2{font-size:25px}
  .sg-st-abschnitt,.sg-st-band{padding:44px 0}
  .sg-st-kopf__bild img{height:230px}
  .sg-st-besuch__bild img{height:250px}
  .sg-st-band__bild img{height:200px}
  .sg-st-knopf{width:100%}
  .sg-st-marken{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sg-st-karten{grid-template-columns:minmax(0,1fr)}
  .sg-st-staerken{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:24px}
  .sg-st-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-st-bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sg-st-bereiche{grid-template-columns:minmax(0,1fr)}
}