/* SOMASGUTNER DESIGN — Corporate Identity Overlay fuer Shlink Web Client */
/* CI: Dunkelgrau #5D5C5C, Schwarz #0D0E0E, Off-White #EAE9E9, Grau #737373/#939393/#DBDBD9, Akzent Orange-Rot #DC2900, Rot #C60E02 */
/* Schriften: Oswald (Headlines/CTA) + Open Sans (Body) */

/* 1) Marken-Kopfzeile mit Logo */
#somasgutner-brand {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; gap: 14px;
  background: #0D0E0E; padding: 12px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#somasgutner-brand .brand-logo {
  height: 40px; width: auto; border-radius: 6px;
  background: #E2E2E2; padding: 3px;
}
#somasgutner-brand .brand-name {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .5px; color: #EAE9E9;
  text-transform: uppercase; margin: 0;
}
#somasgutner-brand .brand-sub {
  font-family: 'Open Sans', sans-serif; font-size: 13px; color: #DC2900;
  font-weight: 400; margin-left: auto;
}

/* 2) CI-Farben global */
:root {
  --brand-primary: #5D5C5C;
  --brand-black: #0D0E0E;
  --brand-bg: #EAE9E9;
  --brand-grey: #737373;
  --brand-grey-light: #DBDBD9;
  --brand-accent: #DC2900;
  --brand-accent-hover: #C60E02;
}

/* body Hintergrund */
body { background: var(--brand-bg) !important; color: var(--brand-black) !important; }
html { background: var(--brand-bg) !important; }

/* 3) Buttons/Brand-Grundflaeche in Orange-Rot (CTA) */
button[type="submit"], 
.mdc-button, 
.btn-primary, 
[data-testid*="submit"], 
.mdc-fab, 
a[href*="createShortUrl"] {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}
button[type="submit"]:hover, .mdc-button:hover {
  background-color: var(--brand-accent-hover) !important;
}

/* 4) aktive Navigation/Selektion in CI-Farben */
.mdc-tab--active, .selected, [aria-selected="true"], .shlink-active {
  color: var(--brand-accent) !important;
}

/* 5) Schriften massiv (Oswald fuer stellen, Open Sans body) */
* { font-family: 'Open Sans', system-ui, sans-serif !important; }
h1, h2, h3, .ql-editor h1, .ql-editor h2, .mdc-typography--headline4,
.mdc-drawer__title, .mdc-top-app-bar__title {
  font-family: 'Oswald', system-ui, sans-serif !important;
  letter-spacing: .3px;
}

/* 6) Karten/Links/Codes in Schwarz-Grau */
a, .link, .shlink-url {
  color: var(--brand-primary) !important;
}
.shlink-link { color: var(--brand-accent) !important; font-weight: 600; }

/* 7) mobile: Kopfzeile kompakt */
@media (max-width: 640px){ #somasgutner-brand{ padding:8px 14px } .brand-logo{ height:30px } .brand-name{font-size:17px} .brand-sub{display:none} }