/* /* Container für Logo und Text ausrichten */
.site-description {
    display: flex !important;
    flex-direction: row;      /* Logo und Text nebeneinander */
    align-items: center;      /* Vertikal mittig ausrichten */
    flex-wrap: wrap;          /* Erlaubt Umbruch falls nötig */
}

/* Das Logo-Element */
.logo {
    display: block;
    float: none !important;   /* Altes Floating aufheben */
    padding: 10px 15px 10px 0;
}

.site_logo {
    background-image: url("/styles/logo_new_01.webp") !important;
    display: inline-block;
    width: 180px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* h1 und p-Tags zwingen, rechts zu bleiben und untereinander zu stehen */
.site-description h1 {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    flex-basis: auto;         /* Nimmt sich den restlichen Platz rechts */
}

.site-description p:not(.skiplink) {
    display: block;
    width: 100%;              /* Zwingt den p-Tag unter das h1 */
    margin: 0;
    padding: 0;
    /* Da h1 und p nun in einem Flex-Container sind, nutzen wir diesen Trick: */
    /* margin-left: -100%;       /* Schiebt den Text-Start unter das h1 */ */
    /* padding-left: 195px;      /* Gleiche Breite wie Logo + Gap, um bündig zu sein */ */
}

/* Falls dein Browser modernes Flexbox unterstützt (bessere Methode): */
.site-description {
    display: grid !important;
    grid-template-columns: auto 1fr; /* Spalte 1: Logo, Spalte 2: Text */
    grid-template-rows: auto auto;   /* Zeile 1: h1, Zeile 2: p */
}

.logo {
    grid-row: 1 / span 2;           /* Logo geht über beide Textzeilen */
    grid-column: 1;
}

.site-description h1 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;                /* Text leicht nach unten zum Logo */
}

.site-description p:not(.skiplink) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}
.headerbar {
	height: auto;
}
@media (max-width: 700px) {
  .headerbar, .navbar {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  .site_logo {
    display: none; /* Logo weg auf Handy laut deinem Wunsch */
  }
}