/*
<style type="text/css">
<!--
*/

html {
  font-size: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.03rem;
	line-height: 1.5;
    background-color: #515B62;
}

.inhalt {
  padding: 1px 10rem 0px 10.0625rem; /* 1px 160px 0px 161px */
  max-width: 40.5rem;  /* 648px */
  margin: 0 auto;
  background-color: #FFFFF5;  /* #FFFFEE; */
  text-align:justify;
}

a:link, a:visited, a:active {
color:#AA0068;
text-decoration:none;
}

a:hover {
color:#FF0000;
}

 .banner {
  	display:flex;
	background:url(topschrift1.gif) center center no-repeat;
	background-color:#95001F;
	align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung (optional) */
    height: 100vh; /* Bsp: volle Viewport-Höhe */
	height:6.25rem; /* 100px */
	max-width:60.5625rem; /* 969px */
	margin-top:1px;
	border:1px solid #FFFFEE;
    box-sizing: border-box;
  }

  .topmenue, .topmenue-2, .endmenue {
    background-color: #FFFFF5;
    font-size: 0.85rem;
    word-spacing:0.47rem;
    max-width: 60.5625rem; /* 969px */
    padding:0.625rem 0.625rem 0px 0.625rem;
    box-sizing: border-box;
  }
 
   .endmenue {
    text-align:center;
    height:2.0rem;
    padding-top:0px;
	word-spacing:1.875rem;
  /* justify-content: center; */
  }
 
/* A ab hier f. 2. Linkreihe, wie z. B. in literatur.htm    */
 .topmenue-2 {
   text-align:left;
   word-spacing: normal;
   max-width: 60.5625rem; /* 969px */
   padding:0.625rem 0.625rem 2px 4.18rem;
   line-height:1.6;
  } 
   
.ziele-block {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    align-items: start;
}

.label {
	max-width: 3.875rem;
}

.ziele {
    line-height: 1.6;
}

.ziele a {
    white-space: nowrap;
}
/* E ab hier f. 2. Linkreihe, z. B. in literatur.htm    */

  .langelinie {
  max-width:60.5625rem; /* 969px */ 
  background-color:#FFFFF5; 
  height:0.625rem;
  border-bottom: 1px solid #C4C4C4;  /* cccccc */
  }
  
 
  /* Zum Zurücksetzen veränderter Textpassagen auf Normalwerte*/
  .normalfont {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.03rem;
	line-height: 1.5;
	font-weight: normal;
	font-style: normal;
  }
 
  .normalklein-1 {  
    font-size: 0.925rem;
    line-height: 1.4;
  }
 /* weg m. kursiv und Roman */
  .normalklein-1-clean {  
    font-size: 0.925rem;
    line-height: 1.4;	
	font-style: normal;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  }
  
  .normalklein-2 {
    font-size: 0.895rem;
    line-height: 1.36;
  }

  .normalklein-3 {
    font-size: 0.841rem;
	line-height: 1.36;
 }

   .rechtsbuendig {
      display: flex; 
	  justify-content: flex-end;
	  margin: 0.3125rem 0.1875rem 0px 0px;
   }


    h1, h2, h3 {
      color:#000000; /* 2B3846 */
      font-weight: 600;
    }

    h1 {
      font-size: 1.65rem;
      margin: 2.4rem 0rem 4.3rem 0rem; /* 50px */
      padding: 0rem;
      line-height:1.45;
      text-align:center;
    }

    h2 {
      font-size: 1.33rem;
      line-height:1.3;
      margin-top:3.75rem;  /* 60px */
      margin-bottom:2.1875rem; /* 35px */
      /* text-align:center; */
    }

    h3  {
      font-size: 1.16rem;
      line-height:1.3;
      margin-top:3.125rem;  /* 50px */
    }
	
	.ue3 {
	  font-weight:bold;
	  margin:-1.6rem 0 0.625rem 0;
	}
    
	.ue4 {
	  font-size:1.03rem;
	  font-weight:600;
	  line-height:1.27;
	  margin-bottom: 0.625rem;
      color:#1D1D1D;
    }
	
	.ue5 {   /* Buchtitel */
	  margin: 0.5rem 0rem 0.3125rem 0rem;
	  font-size:1.22rem;
	  font-weight:600;
	}
	
	
  .bilderkl {
      font-size:0.925rem;
      text-align:center;
	  /* margin-bottom: 0.625rem; */
   }
   
   .bilderkl-2 {
     text-align:left; 
	 margin-left:0.37rem;
   }

    .h4abstd {   /* Überschr. f. Bücher-Bild-Erklärungen */
      margin:0.6875rem 0rem;
    }
	
	.h4abstd-ob {
	margin-top:0.625rem; /* 10px */
	}

	b {
	color:#1D1D1D;
	}
	
    /* halbfett */
    .betont {
      font-weight:600;
      color:#000000;
    }	
	
    /* Verweis auf literatur.htm */
    .verweis {
      display: flex; 
      justify-content: flex-end;
      font-size:0.95rem;
      margin-top:0.3rem;
    }
	
/*  A  Anfang  Listengestaltung; in index, urteile.htm	*/
/* Definiert den Platzhalter für die gesamte Liste */
ul.spezial-liste {
  list-style: none;        /* Entfernt den Standard-Punkt */
  padding-left: 1.4rem;    /* Schafft links Platz für das Sonderzeichen */
}

/* Gestaltet das Listenelement als Bezugspunkt */
ul.spezial-liste li {
  position: relative;      /* Wichtig für die Positionierung des Zeichens */
  margin-bottom: 0.05rem;  /* Abstand zwischen den Zeilen */
}

/* Gilt nur für das Sonderzeichen/Bullet exakt am Zeilenbeginn */
ul.spezial-liste li::before {
  content: "\2022";      /* Hier Sonderzeichen einfügen */
  position: absolute;    /* Löst das Zeichen vom Textfluss */
  left: -1.1rem;         /* Platziert das Zeichen links im geschaffenen Leerraum */
  color: #555;            /* Optionale Farbe für das Zeichen */
  /* font-weight: 600; */ 
  font-size:0.7rem;      /* nur für Größe des Bullets */
  padding-top:0.313rem;
}
/*  E  Ende  Listengestaltung	*/


/*  A  Anfang  Gestaltung index.htm	*/
.inhverz {
    display: grid;
    grid-template-columns: 23.125rem 12.5rem; /*  370px 200px; oder: auto 192px; // 1fr 192px */
    grid-template-areas: "themen hgbild";
    align-items: center;
}

.themen {
    grid-area: themen;
}

.themen ul {
    margin: 0;
    padding: 0;
    list-style: none;
	width: 20rem; /* =320px; */
}

.themen li {
	line-height: 1.5;
}

.inh-bild {
    grid-area: hgbild;
    width: 192px;
    height: 297px;
    background-image: url(eckermann-foerster-uschr_02.png);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: cover; */
	margin-top:2.5rem;
}
/*  E  Gestaltung index.htm	*/

  
  .inh-bild-2 {
     margin: 0 auto;
	 width: 129px;
     height: 200px;
	 background-image: url(eckermann-foerster-uschr_03-129.jpg);
	 background-repeat: no-repeat;
     background-position: center;
	 margin-top:1.25rem;
  }

/*  A  Anfang  Tabelle lebensdaten	*/

.datentabelle {
  max-width: 40.5rem;  /* 648px */
  margin: 0 auto;
  padding-left: 1.25rem; /* Ersetzt die leere erste Tabellenspalte (width="20px") */
}

/* Eine Reihe/Zeile auf dem PC: Richtet alle Elemente nebeneinander aus */
.tab-zeile {
  display: flex;
  align-items: flex-start;
  line-height:1.45;
  margin-bottom: 0.625rem; /* Ersetzt das alte cellspacing="10px" */
}

/* Feste Breite für das Datum, damit die Bindestriche untereinanderstehen */
.tab-anlass {
  width: 9.625rem;  /* 150px=9.375rem / 155px=9.625rem */ 
  flex-shrink: 0;
  text-align:left;
}

/* Der Bindestrich bekommt links und rechts etwas Platz */
.tab-trenng {
  width: 1.625rem;  /* 26px */
  text-align: left;
  flex-shrink: 0;
  margin-left: 0.25rem; /* 4px */
}

/* Der Text füllt den restlichen Platz aus */
.tab-text {
  flex-grow: 1;
}
/*  E  Tabelle lebensdaten	*/

	
.zitat-liste, .zitat-fl, .zitat {
	font-family: Georgia, Palatino, 'Palatino Linotype', 'Palatino LT STD', Cambria, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.035rem;
    color: #222;
	margin:0 1.06rem;
}

 .zitat-fl::first-letter {
    font-weight: bold;
 } 
 
 .zitat {
	font-size: 1.01rem;
    line-height: 1.5;
	margin: 0;
 }
  
  /* urteile-heine */
   .groesser {
     font-size: 1.16rem;
   }

   .gotop, .gotop-2, .gotop-3 {  /* Icon > gehe zum Seitenanfang */
     display: flex; 
	 justify-content: flex-end;
	 background: url(oben3.gif)top right no-repeat;
	 font-size:0.5625rem;
   }
   
   .gotop {             /* nach Text */
      margin: 1rem 0.1875rem 2px 0px;
   }
   .gotop-2 {   /* nach Bildern */
     margin: -1.875rem 0.1875rem -0.937rem 0px;
   }
   
   .gotop-3 {     /* in Tab. lebdaten */
	 margin:0.625rem -0.5625rem 0.625rem 0px;
   }
   
  /* zentriert Container */
   .center-01 {
     width: fit-content; 
	 margin: 0 auto;
   }

 /* zentriert nicht eingebundenen Container m. Text */
   .center-02 {
     text-align:center;
   }

  /* zentriert / funktioniert ohne umschließenden Container! */
   .center-03 {
     display:block;
	 max-width: max-content; /* eine width ist erforderlich */
	 margin: 0 auto;
   }
   
  /* zentriert ohne umschließenden Container, schafft aber einen Absatz/neue Zeile */
   .center-04 {
      display:flex;   /*  schafft aber einen Absatz/neue Zeile! */
	  align-items:center;
	  max-width: max-content; /*  geht wohl auch  width: fit-content;*/
	  margin: 0 auto;
   } 
   
  
  /* nur auf Smph zeigen, nicht auf PC */
  .pc-hide {
     display:none;
  }


/* >>>>>>>>>>>>>>   Anfg. Desktop  BILDER plus Begleittext  Anfg. NEUE VERSION        >>>>>>>>>>>>>>>>>>>>>>>>>              */

/* ZEILE FÜR EINZELBILDER */
.bild-reihe {
	width:fit-content;   /* 94%; */
    text-align: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
}


/* STANDARD-BLOCK  */
:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) {
    display: inline-flex;
    align-items: flex-start;
	column-gap: 0.9rem;
    width: fit-content;
    max-width: 100%; 
}

 .bild-block-htitel-1, .bild-block-htitel-2  {
     column-gap: 1.1rem;
 }
 
/* BILD -  im Hoch- und Querformat */
:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) img {
   display: block;
   width: auto;
   height: auto;
   max-width: 100%;
}

/* BEGLEIT-TEXT allg. Bilder */
:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .text, .text4 {
   text-align: center;
   max-width: 22rem;
   margin-top:0.5rem;
}

/*
:is(.bild-block-02a, .bild-block-03) .text {
  font-size:1.055rem;
  margin-top: -0.5rem;
 } */

 
	.bild-block-02a .text {
       font-size:1.055rem;
       margin-top: -0.5rem;
	  /* margin-left:-6px; */
     }
	 
	/* .bild-block-03 .text {
       font-size:1.055rem;
       margin-top: 0.625rem;
     } */
	 
 :is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .text p {
    margin: 0;
}

 .paarbild-links {
   margin-left:-0.3rem;
   margin-right:0.625rem; /* vertik. Abstand zw. beiden Bildern  */
 }

  .paarbild-rechts {
    margin-right:-0.3rem;
    margin-left:0.625rem;
  }


/* Umfluss-Bilder und Text  */

.umflusstext {   /* umflusstext = textblock */
	margin-top:1.5rem;
    max-width: 900px;  /* bleibt in px */
    line-height: 1.3;
    font-size: 1.06rem;
}

.umflussbild {   /* umflussbild = floatbild */
    float: left;
	height: 152px;  /* bleibt in px */
	width: auto;
    margin: 0 1rem 0.625rem 0;
    object-fit: cover;
}

.umflusstext::after {
    content: "";
    display: table;
    clear: both;
}



/*     BEGLEIT-TEXT Buchbilder    */ 
:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .buchtext {
   text-align: left;
   line-height:1.2; /* HIER NEUE KLASSEN FÜR VERSCHIED. LINE-HEIGHT BILDEN wg. line-height u. width */
   max-width: 22rem; /* besser wohl in Prozent */
}

.buchtext-01 {
line-height:1.2;
}

.buchtext-02 {
line-height:1.375;
}

:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .buchtext p {
    margin: 0;
}

/*  Paarbilder-Bücher Text */
:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .buchtext-klein {
   text-align: center;
   line-height:1.2;
   max-width: 22rem; /* = 352px; besser wohl in Prozent */
}

 /*  Paarbilder-Bücher: Überschriften/Titel */
.buchtext-klein-kopf {
   text-align: center;
   font-size:0.85rem; 
   font-weight:bold;
   margin: 0px 0px 0.25 0px; /* 4px */
}

:is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .buchtext-klein p {
    margin: 0;
	font-size:0.9rem; 
	font-weight:normal;
	text-align:left;
}

/*  BILDPAARE   */
.bild-paar {
    display: flex;
    justify-content: center;
    align-items: flex-start;
       /* gap: 1rem; */
       /* margin: 1rem auto; */
    width: fit-content;
	font-size: 0.85rem; /* muss hier stehen  */
    max-width: 100%;
	padding:1rem 0.5rem;
	border:1px solid #777777; /* muss aus opt. Gründen sein! */
}

.bild-block-01.klein img { /* das pure Bücherbild */
    max-width: 7.5rem;
}


/*   A  f. literatur.html - Bildchenreihe   */

/*   aufwenigere Lösung mit grid  
.bilder-grid {
    display: grid;
    gap: 15px;
    justify-content: center;
    grid-template-columns: repeat(5, 85px);
}

.bild-item {
    text-align: center;
}

.bild-item img {
    width: 85px;
    height: 120px;
    display: block;
}

.bild-item p {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.2;
}  */




/* f. Bildchen-Reihe in literatur.htm, einfachere Lösung m. flexbox  */
.bilder-grid {
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;   /* 24px */
    justify-content: center;
	font-size:0.815rem;
	line-height:1.30;
	margin-top:1.51rem;
}

.bild-item {
    height: 120px; /* bleibt in px */
	width:auto; /* 83px; */
    text-align: center;
}

.bild-item img {
    height: 120px; /* bleibt in px! 83px; */
	width:auto;
	margin-bottom:-0.5rem; /* -0.437rem , -8px */
}
/*   E  f. literatur.html - Bildchenreihe   */
/*     Ende Bilder + Text f. PC-Teil         */




/*    Anfang  @media                                                                                                                                                         */
/* >>>>>>>>>>>>>>  AB HIER  @MEDIA  RESPONSIVES DESIGN für kleine Bildschirme (Tablets:768px, Smartphones: übl. 320px hoch) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

@media (max-width: 768px) { /* 640px = 40rem */

  body {
    font-size: 1.005rem; /* PC 1.03rem;*/
	line-height: 1.49;
  }

  .inhalt {
    padding:0.8rem; /* 16px; */
	text-align:left; 
  }

 .banner {
	max-height:5rem;
	max-width:100%;
	background-size: 92% auto;
	box-sizing: border-box;
 }
	
 .topmenue {
	padding-left:1.25rem; /* 20px; */
	font-size:0.86rem;
	text-align: justify;
	line-height: 1.65;
  }

  /* f. 2. Menue unter Topmenue, z.B. in literatur  */
  .topmenue-2 {
    padding: 0.625rem 0.25rem 2px 1.31rem;
  } 
    
    .ziele-block {
      grid-template-columns: 1fr;
      row-gap: 0.3rem;
    }
	
	.ziele {
	  line-height: 1.8;
	}
   
   .label {
	max-width: 100%;
}

/*  nur auf PC zeigen, nicht auf Smph  */
.mob-hide {
      display: none;
   }
   
 /*  nur auf Smartphone zeigen, nicht auf PC  */
 .pc-hide {
     display:inline;
  }  
  
  .normalklein-1 {  
     font-size: 0.9rem;
     line-height: 1.38;
  }
   
 h1 {
   padding: 0rem;
   font-size: 1.45rem;      /*  1.45 ;;  1.38 */
   margin: 1.5rem 0rem 3.3rem 0rem;   /*  0.75rem 0rem 3.8rem 0rem;   ;; 1.3 / 0 / 4.3 / 0rem */
   line-height:1.3;
   text-align:center;
 }

 /* f. lange Ü.schr. a. kl. Smph. */
 /* h1.h1klein {
   font-size: 1.38rem;
   margin: 1.3rem 0rem 3.8rem 0rem;
 } */
 
 h2 {
   font-size: 1.225rem; /* 1.225 */
   margin-top:2.5rem;
   margin-bottom:1.5rem;
   font-weight:600;
 }
 
  /* f. lange Ü.schr. a. kl. Smph. */
 h2.h2klein {
   font-size: 1.155rem;  /* 1.17 */
   margin-top:2.5rem;
   margin-bottom:1.5rem;
 }

 /*  h2.h2semi {
    font-weight:600;
 }  */
 
  h2.h2semi-margin {
    font-weight:600;
	margin-left:0.6rem;
 }
  
  h3 {
  	font-size: 1.1rem;
	margin: 1.95rem 0 1.25rem 0;
  }
  
  h2, h3, h4 {		/* .betont */
    color:#324152;  /* 2B3846 */
  }
  
  .ue4 {
	  font-size:1rem;
	  line-height:1.25;
    }
	
	.ue5 {   /* Buchtitel */
	  font-size:1.1rem;
	}
	
	.h4abstd {
      margin:0;
    }
	
	.h4abstd-ob {
	margin-top:0.375rem; /* 6px */
	}
  
  b {
	font-weight:600;
	color:#000;
   }

/* Verweis auf literatur.htm */
  .verweis {
    display: flex; 
    justify-content: flex-end;
    font-size:0.92rem;
    margin-top:0.4rem;
  }
  
 .zitat {
	font-size: 1rem;
}



/*  A  Anfang  Gestaltung index.htm	*/
 .themen li {
   line-height:1.8rem;
  } 

  .inhverz {
     grid-template-columns: 1fr;
     grid-template-areas:
       "hgbild"
       "themen";
  }

  .inh-bild {
     margin: 0 auto;
	 width: 129px;  /* bleibt in px */
     height: 200px; /* bleibt in px */
	 background-image: url(eckermann-foerster-uschr_03-129.jpg);
	 margin-top:1.25rem;
  }
/*  E   Gestaltung index.htm	*/

/*  A  Anfang  Tabelle lebensdaten.htm	*/
  .tab-zeile {
    flex-direction: column;   /* Stapelt Datum, Strich und Text untereinander */
    margin-bottom: 1.25rem;    /* 20px, Etwas mehr Abstand zwischen den Blöcken mobil */
  }
  
  .tab-anlass, .tab-text {
    width: 100%;            /* Nutzt die volle Smartphone-Breite */
  }
  
  .tab-trenng {
    display: none;          /* Bindestrich auf d. Smph überfl. */
  }
/*  E  Tabelle lebensdaten.htm	*/



  
 /* >>>>>>>>>>  BILDER f. SMARTPHONE - @media Anfg.: BLOCK  @MEDIA   >>>>>>>>>>>>>>>>>>                         */
    /* für alle Einzelbilder */
    :is(.bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) { /* Zahl kann erweitert werden */
        flex-direction: row;
        column-gap: 0.6rem; /* f. Titelbild */
        max-width: 100%;
    }

   /* f. (Buch-)Einzel-Bilder m. breitem linksbündigem Text, z.B. Top-Bild; ggf auch .bild-block-01a, .bild-block-01b,  */
	.bild-block-htitel-1 {
	  column-gap: 0.7rem;
	}
	
	.bild-block-htitel-2 {
	  column-gap: 0.4rem;
	}
	
    /* Bilder dynamisch verkleinern */
	/* für Hochformat Einzelbild/Topbild */
    :is(.bild-block-01, .bild-block-htitel-1) img {
	  width: clamp(8rem, 30vw, 10rem);
    }
	
	/* für Hochformat Einzelbild mittelgroß */
    :is(.bild-block-01a) img {
	  width: clamp(6rem, 26.8vw, 7rem);
    }
	
	/* für Querformat u. schmaler Text */
	:is(.bild-block-02) img {
 	  width: clamp(8rem, 52vw, 12.5rem);
    }
	
	/* für Querformat u. breiter/viel Text */
	:is(.bild-block-02a) img {
 	  width: clamp(8rem, 40vw, 12.5rem);
	}
	
	/* für eher quadratisches Format */
	:is(.bild-block-03) img {
 	  width: clamp(8rem, 32vw, 10.5rem);
    }
	
	.bild-block-03c {
	  margin-left:1.87rem;
	  margin-right:-1.87rem;
	}
	
	

	/* für Paarbilder-Bücher */
   .bild-paar img {
	  width: clamp(5rem, 28vw, 6.5rem);
    }

    /* Text */
    :is(.bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .text {
        flex: 1;
        max-width: 60%; /* bricht lange Zeilen um */
		line-height:1.3;
		font-size:0.93rem;
    }
	
	.bild-block-02a .text {
       font-size:0.91rem;
       margin-top: -0.3rem;
	   margin-left:-0.375rem;
     }
	 
	.bild-block-03 .text {
       font-size:0.91rem;
       margin-top: 2px;
     }

	.bild-block-03 .text4 { /* f. urteile Zeichng. K. Eckm. */
       font-size:0.91rem;
       margin-top: 2px;
	   max-width:7.2rem;

     }
	 
	 
	
	/* Schriftgröße und Abstände bei viel Text verkleinern  */
	:is(.bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .text-kl {
        flex: 1;
        /* max-width: 60%; */ /* bricht lange Zeilen um */
		line-height:1.3;
		font-size:0.9rem;
		margin-left:-0.8rem; /* f. Text Hannch. Grab einzeilig in bild-block-2a */
		margin-top:-0.33rem;
		max-width: 100%;
    }


  /* :is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .buchtext {
       text-align: left;
       line-height:1.2;
       max-width: 22rem;
}

    :is(.bild-block, .bild-block-01, .bild-block-01a, .bild-block-01b, .bild-block-htitel-1, .bild-block-htitel-2, .bild-block-02, .bild-block-02a, .bild-block-03, .bild-block-04, .bild-block-05) .buchtext p {
    margin: 0;
    }  */
	
	.buchtext-klein {
	   padding-left:2px;
	}
	
	.br-zlhoehe {  /* übfl., nt. verwendet */
	line-height:1.26;
	}
	
		
    /* Bildpaare */
    .bild-paar {
        flex-direction: column;
        align-items: center;
        gap: 2rem;    /* horiz. Abst. zw. den beiden Paaren */
        margin: 0.5rem auto;
		width:98%;
		padding-left:0;
		padding-right:0;
    }	
	
	.paarbild-links {
	   margin-left:0.3rem;
	   margin-bottom:0.6rem; /* horiz. Abstand zw. beiden Bildern  */
	 }
	
	.paarbild-rechts {
	   margin-right:0.2rem;
	}
	
	
/* A  f. mehrere Bilder nebeneinander, s. literatur.html */
     /* Tablet m. 550px Bildschirm */
    /* @media (max-width: 550px) {
	 
         .bilder-grid {
         grid-template-columns: repeat(3, 83px);
		 gap: 4rem 1rem;
        }
      } */

/* Smartphone m. 360px Bildschirm */
   .bilder-grid {
        grid-template-columns: repeat(2, 5.1875rem);
		/* row-gap:4rem; */
		gap: 4rem 1rem;
    }

    /* 5. Element mittig unter den anderen */
    .bilder-grid .bild-item:last-child {
        grid-column: 1 / span 2;
        justify-self: center;
    }
/* E  f. mehrere Bilder nebeneinander, s. literatur.html */

  
  
  /* Umfluss-Bilder und Text  */

    .umflusstext {   /* umflusstext = textblock */
       max-width: 900px; /* soll wohl in px sein */
       line-height: 1.3;
       font-size: 1.04rem;
    }

    .umflussbild {   /* umflussbild = floatbild */
       float: left;
	   height: 152px;  /* bleibt in px */
	   width: auto;  /* hkf*/
       margin: 0 0.75rem 0.625rem 0;  /* 0.625rem */
       object-fit: cover;
    }

	
 /* muss hier am Ende stehen: Priorität */
  .groesser {
     font-size: 1.01rem;
  }


} /* E BLOCK  @MEDIA - BILDER f. SMARTPHONE  */


  /* }   Klammer gehörte wohl zu ob. @media only screen and (max-width: 768px)*/



}  /* E @media (max-width: 40rem) {  640px = 40rem */  



/*
-->
</style>
*/