:root{--sg-indigo:#141861;--sg-indigo-hell:#242a7d;--sg-orange:#FF8C00;--sg-orange-text:#231a00;--sg-tinte:#1C1E26;--sg-grau:#565B6E;--sg-grau-hell:#8A8FA3;--sg-linie:#E4E6F5;--sg-linie-zart:#EDEFF7;--sg-grund:#F6F7FB;--sg-gruen:#0F7A4A;--sg-rot:#B3261E;--sg-breite:1406px;--sg-schmal:760px}.sg-u{color:var(--sg-tinte)}
.sg-u *{box-sizing:border-box}
.sg-u-bahn{max-width:var(--sg-breite);margin-inline:auto;padding:0 20px}
.sg-u-bahn--schmal{max-width:calc(var(--sg-schmal) + 40px)}
.sg-u-abschnitt{padding:56px 0}
.sg-u-abschnitt--grund{background:var(--sg-grund)}
.sg-u-abschnitt--indigo{background:var(--sg-indigo);color:#fff}
.sg-u-abschnitt--eng{padding:36px 0}
.sg-u h1{margin:0 0 16px;font-size:40px;line-height:1.14;letter-spacing:-1px;color:var(--sg-indigo)}
.sg-u h2{margin:0 0 8px;font-size:30px;line-height:1.2;letter-spacing:-.5px;color:var(--sg-indigo)}
.sg-u h3{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.3px;color:var(--sg-indigo)}
.sg-u p{margin:0}
.sg-u-abschnitt--indigo h1,.sg-u-abschnitt--indigo h2,.sg-u-abschnitt--indigo h3{color:#fff}
.sg-u-abschnitt--indigo .sg-u-unter{color:rgba(255,255,255,.82)}
.sg-u-unter{max-width:72ch;font-size:18px;line-height:1.55;color:var(--sg-grau)}
.sg-u-kopf{margin-bottom:28px}

/* Fliesstext */
.sg-u-text{max-width:70ch;font-size:18px;line-height:1.65;color:var(--sg-tinte)}
.sg-u-text p{margin:0 0 18px}
.sg-u-text p:last-child{margin-bottom:0}
.sg-u-text h2{margin:36px 0 12px;font-size:26px}
.sg-u-text h3{margin:28px 0 10px;font-size:20px}
.sg-u-text ul,.sg-u-text ol{margin:0 0 18px;padding-left:24px}
.sg-u-text li{margin-bottom:8px}
.sg-u-text a{color:var(--sg-indigo);text-underline-offset:3px}
.sg-u-text strong{font-weight:600}

/* Knoepfe */
.sg-u-knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 26px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:18px;font-weight:600;text-align:center;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease}
/*
 * INDIGO TRAEGT, ORANGE ZEIGT (21.09.2026).
 *
 * Thomas, zweimal in einer Nachricht: „Das Design soll nicht zu orange
 * lastig sein!"
 *
 * Auf der Startseite war der Hauptknopf zuerst repariert — auf /kontakt/,
 * /team/, /newsletter/ und /bestellstatus/ stand danach derselbe Knopf noch
 * orange da. Zwei verschiedene Hauptknoepfe im selben Shop sind schlimmer
 * als ein oranger.
 *
 * Orange bleibt genau dort, wo es klein ist und einen ZUSTAND zeigt:
 * der Fokusrahmen (unten), der Reiter „hier stehen Sie" auf der
 * Produktseite, das „Aktionen"-Feld im Menuefuss. Nicht als Flaeche,
 * nicht als Ueberschriftfarbe.
 */
.sg-u-knopf--voll{background:var(--sg-indigo);color:#fff;
  box-shadow:0 6px 18px rgba(20,24,97,.22)}
.sg-u-knopf--voll:hover{background:var(--sg-indigo-hell);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(20,24,97,.28)}
.sg-u-knopf--rand{background:#fff;color:var(--sg-indigo);box-shadow:inset 0 0 0 1px var(--sg-linie)}
.sg-u-knopf--rand:hover{background:var(--sg-grund);box-shadow:inset 0 0 0 1px var(--sg-indigo)}
.sg-u-knopf--hell{background:#fff;color:var(--sg-indigo)}
.sg-u-knopf--hell:hover{transform:translateY(-2px)}
.sg-u-knopf--indigo{background:var(--sg-indigo);color:#fff}
.sg-u-knopf--indigo:hover{background:var(--sg-indigo-hell);transform:translateY(-2px)}
.sg-u-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.sg-u-knopf:focus-visible{outline:3px solid var(--sg-orange);outline-offset:3px}

/* Karte */
.sg-u-karte{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--sg-linie);border-radius:16px;padding:24px}
.sg-u-karte--knapp{padding:20px}

/* Klickbare Zeilen */
.sg-u-wege{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--sg-linie)}
.sg-u-wege--oben{margin-top:16px}
.sg-u-weg{border-bottom:1px solid var(--sg-linie)}
.sg-u-weg:last-child{border-bottom:0}
.sg-u-weg a{display:flex;align-items:center;gap:12px;min-height:48px;
  padding:6px 0;text-decoration:none;color:var(--sg-indigo);
  font-size:17px;font-weight:500;line-height:1.35}
.sg-u-weg__text{flex:1 1 auto}
.sg-u-weg__zusatz{flex:0 0 auto;font-size:17px;font-weight:600;color:var(--sg-grau);
  font-variant-numeric:tabular-nums}
.sg-u-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-u-weg a:hover .sg-u-weg__pfeil{border-color:var(--sg-orange);transform:rotate(-45deg) translate(2px,2px)}
.sg-u-weg a:hover .sg-u-weg__text{text-decoration:underline;text-underline-offset:3px}
.sg-u-weg a:focus-visible{outline:3px solid var(--sg-orange);outline-offset:2px;border-radius:6px}

/* Raster */
.sg-u-gitter{display:grid;gap:22px}
.sg-u-gitter--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-u-gitter--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-u-gitter--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sg-u-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.sg-u-zwei--breit-links{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.sg-u-zwei--breit-rechts{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}

/* Bild */
.sg-u-figur{margin:0;border-radius:16px;overflow:hidden;line-height:0;background:var(--sg-grund)}
.sg-u-figur img{display:block;width:100%;height:100%;object-fit:cover}
.sg-u-figur--hoch img{height:420px}
.sg-u-figur--mittel img{height:340px}
.sg-u-figur--flach img{height:240px}

/* Anschrift und Oeffnungszeiten */
.sg-u-anschrift{font-size:18px;line-height:1.6;color:var(--sg-tinte)}
.sg-u .sg-oz-heute{display:flex;align-items:baseline;gap:9px;font-size:17px;line-height:1.45;
  margin:18px 0 6px;flex-wrap:nowrap}
.sg-u .sg-oz-heute__text{flex:1 1 auto;min-width:0}
.sg-u .sg-oz-heute__text{font-size:17px;line-height:1.45}
.sg-u .sg-oz-heute__punkt{flex:0 0 auto;align-self:center}

/* Formular */
.sg-u-formular{display:grid;gap:18px}
.sg-u-feld{display:flex;flex-direction:column;gap:7px}
.sg-u-feld > label{font-size:17px;font-weight:600;color:var(--sg-tinte)}
.sg-u-feld__hinweis{font-size:16px;color:var(--sg-grau)}
.sg-u-feld input[type=text],.sg-u-feld input[type=email],.sg-u-feld input[type=tel],
.sg-u-feld select,.sg-u-feld textarea{
  width:100%;min-height:52px;padding:13px 15px;
  border:1px solid #C9CDE4;border-radius:10px;background:#fff;
  font:inherit;font-size:17px;line-height:1.4;color:var(--sg-tinte)}
.sg-u-feld textarea{min-height:130px;resize:vertical}
.sg-u-feld input:focus,.sg-u-feld select:focus,.sg-u-feld textarea:focus{
  outline:0;border-color:var(--sg-indigo);box-shadow:0 0 0 3px rgba(20,24,97,.14)}
.sg-u-feld input[aria-invalid=true],.sg-u-feld textarea[aria-invalid=true]{border-color:var(--sg-rot)}
.sg-u-feld__fehler{font-size:16px;font-weight:600;color:var(--sg-rot)}
.sg-u-zustimmung{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.5;color:var(--sg-tinte)}
.sg-u-zustimmung input[type=checkbox]{flex:0 0 auto;width:24px;height:24px;margin-top:2px;accent-color:var(--sg-indigo)}
.sg-u-zustimmung a{color:var(--sg-indigo)}
.sg-u-nebenweg{display:inline-flex;align-items:center;min-height:44px;
  font-size:17px;color:var(--sg-indigo);text-underline-offset:3px}
.sg-u-meldung{padding:16px 18px;border-radius:12px;font-size:17px;line-height:1.5}
.sg-u-meldung--gut{background:#E8F5EE;color:#0B5B37;border:1px solid #BFE3D0}
.sg-u-meldung--schlecht{background:#FBEAE9;color:#8C1D18;border:1px solid #F2C4C1}

@media (max-width:1100px){
  .sg-u-gitter--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .sg-u h1{font-size:30px;letter-spacing:-.6px}
  .sg-u h2{font-size:25px}
  .sg-u-abschnitt{padding:44px 0}
  .sg-u-abschnitt--eng{padding:30px 0}
  .sg-u-zwei,.sg-u-zwei--breit-links,.sg-u-zwei--breit-rechts{grid-template-columns:minmax(0,1fr);gap:26px}
  .sg-u-gitter--2,.sg-u-gitter--3,.sg-u-gitter--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-u-knopf{width:100%}
  .sg-u-figur--hoch img,.sg-u-figur--mittel img{height:250px}
  .sg-u-figur--flach img{height:190px}
  .sg-u-text{font-size:17px}
}
@media (max-width:520px){
  .sg-u-gitter--2,.sg-u-gitter--3,.sg-u-gitter--4{grid-template-columns:minmax(0,1fr)}
}