@use "sass:map";
#logo {
  display: flex;
  flex-grow: 1;
  align-items: end;
  margin: 0;
  padding: 10px 0; }

#logo .logo-klein, #logo .logo-gross {
  display: flex;
  flex-direction: row;
  align-items: center; }

#logo .logo-klein img {
  width: 250px; }

#logo .logo-klein #title {
  font-size: 1.5em;
  color: #185078;
  margin: 0 0.7em;
  font-weight: bold;
  text-transform: uppercase; }

#logo .logo-gross img {
  padding: 0 2em 0 1em;
  width: 400px; }

#logo .logo-gross #title {
  display: inline-flex;
  flex-direction: column;
  color: #185078; }

#logo .logo-gross .zeile1 {
  font-weight: 700;
  font-size: 25px;
  text-transform: uppercase; }

#logo .logo-gross .zeile2 {
  letter-spacing: .02em;
  font-size: 17px; }

@media (max-width: 768px) {
  #logo {
    width: 100%;
    padding: 0 6px 0; }
  #logo .logo-klein #title {
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 700; }
  #logo .logo-klein, #logo .logo-gross {
    padding: 2px;
    flex-grow: 1;
    white-space: normal;
    flex-direction: column;
    text-align: center; }
  #logo .logo-klein .zeile1, #logo .logo-gross .zeile1 {
    font-size: .8em;
    font-weight: 700; }
  #logo .logo-klein .zeile2, #logo .logo-gross .zeile2 {
    font-size: .6em;
    line-height: 1.1em;
    padding-bottom: 5px; }
  #logo .logo-klein img {
    width: 250px;
    padding: 0 0.2em; }
  #logo .logo-gross img {
    width: 200px;
    padding: .2em;
    margin-right: auto;
    margin-left: auto; } }