/* Die einzige Breakpoint-Schicht der Anwendung.

   Es gibt genau zwei globale Stufen. Wer eine dritte braucht, hat meist ein
   Layoutproblem statt eines Geraeteproblems:

     <=1100px  Tablet und darunter: die Hauptnavigation wird zum Menue-Knopf.
      <=700px  Telefon: der Kopf wird zweireihig, Inhalte werden einspaltig.

   Der zweireihige Kopf folgt dem bewaehrten Stand aus develop: oben die Marke
   und der Menue-Knopf, darunter Design-Auswahl und Glocke. Getrennte Zeilen
   sind der Grund, warum nichts mehr ueber das Logo laufen kann - es braucht
   dafuer keine Einzelregel je Element. */
@media(max-width:1100px){.desktop-main-nav{display:none}
.mobile-nav{display:block}
.home-topics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-topic-card:last-child{grid-column:1/-1}
.home-hero{grid-template-columns:1fr;min-height:0}
.home-poster-stage{min-height:20rem}
.home-columns{grid-template-columns:1fr}
.info-grid{grid-template-columns:1fr 1fr}
.home-news-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){:root{--page-gutter:.85rem;--header-logo-h:2.75rem}
.site-header-shell{min-height:0;grid-template-columns:minmax(0,1fr) auto;column-gap:.75rem;row-gap:.6rem;padding-block:.8rem}
/* `display:contents` loest den reinen Layout-Wrapper auf, damit Design,
   Glocke und Menue direkt im Kopfraster liegen. So bleibt die Vorlage
   unveraendert und das Raster kann jedes Element einzeln setzen. */
.site-header-actions{display:contents}
.site-brand{grid-column:1;grid-row:1}
.mobile-nav{grid-column:2;grid-row:1;justify-self:end}
.site-header-theme{grid-column:1;grid-row:2;justify-self:start}
.site-header-notification{grid-column:2;grid-row:2;justify-self:end;min-width:var(--tap);min-height:var(--tap)}
/* Die Kontobox entfaellt hier nicht, sie zieht um: Konto, Administration und
   Abmelden stehen im Menue-Panel bereits als eigene Eintraege. */
.site-header-account{display:none}
.site-header-theme-toggle{min-height:var(--tap)}
/* Der Ausloeser steht jetzt am linken Rand, also oeffnet das Design-Menue
   nach rechts - und nie breiter als der Viewport. */
.site-header-theme-form{left:0;right:auto;width:min(20rem,calc(100vw - 2*var(--page-gutter)))}
.site-header-theme-item{min-height:var(--tap)}
.home-hero-mantra{font-size:clamp(2.3rem,14vw,3.8rem)}
.home-poster-copy{padding:1.2rem}
.home-poster-stage{min-height:15rem}
.home-topics-grid,.home-news-grid,.info-grid{grid-template-columns:1fr}
.home-topic-card:last-child{grid-column:auto}
.home-event-item{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.field.full{grid-column:auto}
.section-heading{align-items:flex-start;flex-direction:column}
.site-footer-shell{align-items:flex-start;flex-direction:column}
.site-footer-nav{gap:.55rem 1rem}
}