/* D I E   A B S C H N I T T S - U E B E R S C H R I F T E N

   Eingebunden auf den fuenf Seiten, die mehr als eine Ueberschrift dieser
   Ebene tragen: index, konzept, klinik, anmeldung, qualitaet.

   Gemeint sind die grossen farbigen Ueberschriften, die je einen Abschnitt im
   Textfluss eroeffnen. Sie standen auf zwei verschiedenen Groessenleitern -
   die einen trugen "sub" und liefen ueber h2.sub, die anderen ueber h2 bzw.
   h2.left. Auf konzept.html zum Beispiel:

      "Das modulare Behandlungskonzept."          h2.left.jadegruen.fifty.sub
      "Die Bausteine fuer einen nachhaltigen..."  h2.jadegruen.sixty.sub
      "Sie werden begleitet von erfahrenen..."    h2.left.gradient--two
      "Verschaffen Sie sich einen Ueberblick..."  h2.left.gradient--three

   Gemessen (px):

      Fenster        sub-Paar   gradient-Paar
      <= 480            24          24        gleich
      481- 768          28          28        gleich
      769-1023          24          32        ABWEICHUNG, ein Drittel
      1024-1200         32          36        ABWEICHUNG
      1201-1920         36          36        gleich (Zufall: h2.left ist
                                              dort auf 2.25rem festgesetzt)
      > 1920            44          48        ABWEICHUNG

   Die sub-Leiter war dabei nicht nur anders, sondern in sich unstimmig: Bei
   769-1023px stand sie auf 24px und damit KLEINER als die 28px des Bandes
   darunter - die Ueberschrift wuchs, wenn das Fenster schmaler wurde.

   E I N E   L E I T E R   F U E R   A L L E   V I E R

   Angelegt an den Wert, den beide Gruppen auf dem Desktop ohnehin teilen
   (36px bei 1201-1920px), und von dort gleichmaessig heruntergerechnet - in
   Schritten von 4px, also nicht je Ueberschrift verhandelt:

      > 1920      2.75rem   44px   1.22 x
      1201-1920   2.25rem   36px   1.00 x  <- Anker, unveraendert
      1024-1200   2.00rem   32px   0.89 x
       769-1023   1.75rem   28px   0.78 x
       481- 768   1.75rem   28px   0.78 x  unveraendert
            <481  1.50rem   24px   0.67 x  unveraendert

   Drei der sechs Baender bleiben damit fuer beide Gruppen, wie sie waren.
   Geaendert wird nur dort, wo die beiden Leitern auseinanderliefen.

   line-height als VERHAELTNIS statt als fester rem-Wert: Die alten Angaben
   streuten zwischen dem 1.0- und dem 1.27-fachen der Schriftgroesse - das
   sub-Paar hatte bei 1201-1920px eine Zeilenhoehe von exakt 36px bei 36px
   Schrift, also gar keine Durchschuss. Bei einzeiligen Ueberschriften faellt
   das nicht auf, beim Umbruch schon. 1.25 liegt am oberen Ende des bisher
   Vorhandenen und waechst von selbst mit jeder Stufe mit.

   D I E   D O P P E L T E   K L A S S E   I M   S E L E K T O R

   "h2.abschnittstitel.abschnittstitel" ist kein Vertipper. Einfach
   geschrieben haette der Selektor (0,1,1) - genauso viel wie "h2.left" in
   css/min1201-max1920.css und css/min320-max480.css, die beide eine
   font-size mitbringen. Bei gleicher Spezifitaet entschiede die
   Ladereihenfolge, und darauf soll sich eine Datei, die auf fuenf Seiten
   eingebunden ist, nicht verlassen muessen. Die Wiederholung hebt den
   Selektor auf (0,2,1) und macht ihn von der Reihenfolge der <link>-Zeilen
   unabhaengig.

   Gegengeprueft: Die einzige Regel im Projekt, die eine font-size auf einem
   h2 mit (0,2,1) setzt, ist ".container-text.anmeldung h2" in drei
   min*-max*-Dateien. Sie trifft ausschliesslich die Auftaktzeile von
   anmeldung.html - und die traegt die Klasse bewusst nicht, siehe unten.
   Alles andere liegt bei (0,1,1) oder darunter.

   Weil die Basisregel damit auch "h2.left" schlaegt, gilt ihre line-height
   ueber alle Breiten; die Media Queries brauchen nur noch die font-size.

   N I C H T   B E T R O F F E N   sind die anderen Ebenen, die je fuer sich
   schon einheitlich sind:

      h1                       Seitentitel
      h2.big                   Hero-Zeile unter dem h1
      h2.colorchange /
      h2.left.kw-split-text    das animierte Zitat (konzept, index, qualitaet)
      h3                       Karten-, Slide- und Spaltentitel
      h2 in den 480er-Baendern die weissen bzw. dunklen Zeilen in den
                               Vollbreiten-Farbbaendern (.darkblue480,
                               .lightblue480, .lightjade480). Auf den meisten
                               Seiten ist das die EINZIGE h2 - ein
                               Grafikelement mit eigener Typografie, kein
                               Abschnitt im Textfluss.
      h2.darkblue zentriert    Seitentitel auf impressum und datenschutz,
                               die kein h1 haben
      .container-text.anmeldung h2   die Auftaktzeile von anmeldung.html,
                               die dort allein in ihrer Section steht und
                               eine eigene Groessenstaffel besitzt */
h2.abschnittstitel.abschnittstitel {
   font-size: 2.75rem;
   line-height: 1.25;
}

@media screen and (max-width: 1920px) {

   h2.abschnittstitel.abschnittstitel {
      font-size: 2.25rem;
   }
}

@media screen and (max-width: 1200px) {

   h2.abschnittstitel.abschnittstitel {
      font-size: 2rem;
   }
}

@media screen and (max-width: 1023px) {

   h2.abschnittstitel.abschnittstitel {
      font-size: 1.75rem;
   }
}

@media screen and (max-width: 480px) {

   h2.abschnittstitel.abschnittstitel {
      font-size: 1.5rem;
   }
}