/* 1. CSS-Reset der Browser-Stylesheet-defaults --> Z.30 */ 
/* 2. Allgemeine Basisstyles --> Z.38 */
/* 2.1 Schrift (auch font-face), HG-Farbe, Farbverlauf, Linkanchor --> Z.40 */
/* 2.2 Überschriften h1, h2, h3 --> Z.119 */
/* 2.3 Vertikale Abstände zu h1, h2, h3 und eingefügte before-Trenner --> Z.179 */
/* 2.4 Weitere vertikale Abstände, mit oder ohne eingefügte before-Trenner --> Z.220 */
/* 2.5 Basistyles des div-wrapper/grid container, nur als Verweis --> Z.235 */
/* 3. Layout: grid mit grid-template-areas --> Z.239 */
/* 4. header; komplett mit header-tag, img, <a>, figure und responsive; noscript ist hier, im Basislayout im header! --> Z.263 */
/* 5. Horiz. Header-Navigation; komplett mit nav-tag, ul, li, <a> und current page; auch button --> Z.323 */
/* 6. Vertik. Seiten-Navigation; komplett mit nav-tag, ul, li, <a> und Überschrift-Item; auch button --> Z.400 */
/* 7. Hauptcontent/main komplett: neuer Rahmen, Abstände, TOC+TOC-Bild, article, section, p, ul, Contentbilder (auch resp.), Teilen-Buttons, Trenner, Schrift, Teaser-Absätze, Angebot-Absätze --> Z.488 */
   /* 7.1 Einzelbild mit caption, aber ohne ru-Text im Hauptcontent; Startseite --> Z.635 */
   /* 7.2 Einzelbild mit caption und ru-Text im Hauptcontent --> Z.668 */
   /* 7.3 Bilderpärchen mit gemeinsamer figcaption im Hauptcontent --> Z.776 */ 
   /* 7.4 TOC einschl. Bezeichnung "Inhaltsverzeichnis (klickbar):" und TOC-Bild --> Z.806 */
/* 8. Über mich-Sidebar komplett: mit Profil-Buttons drin (neu! + resp.), normale Bilder (resp.), Überschrift, Schrift, Abstände --> Z.901 */
/* 9. Footer: komplett mit Schrift, hr-Trenner, copyscape-Grafik (resp.) --> Z.983 */
/* 10. Link-states, außer "unbesuchter Normalzustand" und current page (s. headernav); U-bericht Link-states, 1.-5. --> Z.1028 */
/* 11. Media Queries, einschl. states für <button> --> Z.1137 */
  /* 11.1: 1. MQ nach desktop-Layout, 830px/51.875em - 960px/60em, explizites MQ mit 2 Spalten --> Z.1139 */
  /* 11.2: 2. MQ nach desktop-Layout, 671px/41.9375em - 829px/51.8125em, "große Tablets"; explizites MQ mit 2 Spalten --> Z.1225 */
  /* 11.3: 3. MQ nach desktop-Layout, 500px/31.25em - 670px/41.875em, "kleine Tablets"; explizites MQ mit visuell 1 Spalte, technisch 2 --> Z.1414 */
  /* 11.4: 4. MQ nach dem desktop-Layout, (430px) bis max. 499px/31.1875em, "Smartphones"; kein explizites MQ mehr! --> Z.1736 */
  /* 11.5: 5. MQ nach dem desktop-Layout, (320px) bis max. max. 429px/26.8125em, "Smartphone 2"; kein explizites MQ mehr! --> Z.2051 */
/* 12. Kontaktdaten auf Impressumsseite: Mit span und display:none Spambots abwehren --> Z.2121 */
/* U-bericht = Umstellungsbericht */


/* 1. CSS-Reset der Browser-Stylesheet-defaults */
html, body, header, footer, aside, article, section, nav, main, h1, h2, h3, h4, div, p, blockquote, cite, strong, em, ul, ol, li, span, a, img, figure, figcaption, video, button {
    padding: 0;
    margin: 0;
    border: 0; /* Nachträglich ergänzt, wegen Trennstrich/padding-Problem bei Headernavi */
} 


/* 2. Allgemeine Basisstyles */

/* 2.1 Schrift, HG-Farbe, Farbverlauf, Linkanchor */

/* Selbstgehostete webfonts Gelasio, Inter Tight, Inter; siehe resp. U-bericht 3.7a.4, U-bericht Basisstyles, 10. */
/* Anführungszeichen könnten auch die üblichen doppelten sein; wg. same-origin-policy relative Pfade belassen! */

/* Gelasio regular für h1, h2, span.ueberschrift-uebermich, headingitem-ganz */
@font-face {
    font-family: 'Gelasio';
    src: url('../schriftarten/gelasio-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/* Gelasio semibold/600 für h3 */
@font-face {
    font-family: 'Gelasio';
    src: url('../schriftarten/gelasio-semibold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
/* Inter regular für body, p.wort-toc, noscript, li.h2-toc, li.h3-toc, aside, figcaption Bildpärchen */
@font-face {
    font-family: 'Inter';
    src: url('../schriftarten/inter-v20-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/* Inter bold für headnav-button, sidenav-button, body, p.wort-toc, noscript, li.h2-toc, li.h3-toc, aside, figcaption */
@font-face {
    font-family: 'Inter';
    src: url('../schriftarten/inter-v20-latin-700.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
/* Inter italic für body, p.wort-toc, noscript, li.h2-toc, li.h3-toc, aside, figcaption Einzelbild */
@font-face {
    font-family: 'Inter';
    src: url('../schriftarten/inter-v20-latin-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}
/* Inter Tight mit letter-spacing für headnav und sidenav (a darin), footer */
@font-face {
    font-family: 'Inter-Tight';
    src: url('../schriftarten/inter-tight-v9-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



/* U-bericht 2.,7. und 10; resp. U-bericht 3.1-3.5, 3.6, 3.7.3, 3.7a.4c); s.o. Basisstyles 2.1 */
body {
    font-family: Inter, Verdana, sans-serif; /* U-bericht 2.,7. und 10 */
    font-size: 1rem; /* 16px, resp. U-bericht 3.1, 3.6, 3.7.3, 3.7a.4c) */
    font-style: normal; /* wg. Schrift-Selbsthosting, U-bericht 10. */
    font-weight: normal; /* wg. Schrift-Selbsthosting, U-bericht 10. */
    color: black;
    /* background-color: #dfcc23;  wäre als alleinige, einfache HG-Farbe o.k. */
}

/* Der Farbverlauf muss je nach Größe der Seite angepasst werden; U-bericht 2. + 7. */
body.farbverlauf-seiteklein {
    background-image: radial-gradient(ellipse at 50% 49%,#af5c7e, #f8f8be 58%, #af5c7e 79%, #000000 96%);
    /* background-image: radial-gradient(#bf3c70, #fdfda5 50%, #bf3c70 85%, #000000 97%); */
}

body.farbverlauf-seitegross {
    background-image: radial-gradient(ellipse at 50% 47%, #af5c7e, #f8f8be 73%, #af5c7e 84%, #000000 92%);
    /* background-image: radial-gradient(ellipse at 50% 47%, #b35178, #fdfda5 70%, #b35178 84%, #000000 94%); rot/gelb etwas kräftiger */
    /* background-image: radial-gradient(ellipse at 50% 47%, #bf3c70, #fdfda5 15%, #f8f8be 70%, #000000 93%);  schwarz-hellgelb */
}

/* alle anchors sollen schwarz und underline sein, nur im Hauptcontent regulär blau (0c0095) und in Nav ohne underline; U-bericht 3. */
a { 
    color: black; 
    text-decoration: underline;
}


/* 2.2 Überschriften h1, h2, h3 */

/* U-bericht 4.1, 10.1; s.o. Basisstyles 2.1 */
h1, h2, h3 {
    font-family: Gelasio, Georgia, serif;
    color: black;
}

/* h1, U-bericht 4.2, 10.1; s.o. Basisstyles 2.1 */
h1 {
    text-align: center; /* U-bericht 4.2a */
    font-size: 1.625rem; /* auf 26px erhöht; wg. Selbsthosting von Inter; U-bericht 4.3a; resp. U-bericht 3.7a.4a) und 3.18a) (5. MQ) */
    line-height: 1.1; /* U-bericht 4.2a, resp. U-bericht 3.7.1, 3.7.2 */
    margin-bottom: 35px; /* U-bericht 4.2a */
    font-weight: normal; /* wäre sonst bold per default und wg. Schrift-Selbsthosting; U-bericht 4.2b, 10.1 */
    font-style: normal; /* wg. Schrift-Selbsthosting; U-bericht 4.2b, 10.1 */
    overflow-wrap: break-word; /* guter ZU; aus FF/Blox übernommen, seit 2011 "overflow-wrap" statt word-wrap; U-bericht 4.2b */
    max-width: 100%; /* Aus FF übernommen, vorsichtshalber, evtl. resp. von Bedeutung? U-bericht 4.2b */
    padding-left: 45px; /* wg. neuem Rahmen, "Breitenoptik", eingerücktem ol-toc, neuem Px-Bereich und größerer h1; U-bericht 4.2a+c */
    padding-right: 45px; /* wg. neuem Rahmen, "Breitenoptik", eingerücktem ol-toc, neuem Px-Bereich und größerer h1; U-bericht 4.2a+c */
}

/* Nur auf der Startseite ist die h1 zusätzlich unterstrichen; U-bericht 4.2d */
.h1-startseite-unterstrichen { text-decoration: underline; }

/* h2, U-bericht 4.3, 10.1; s.o. Basisstyles 2.1 */
h2 {
    text-align: center; /* U-bericht 4.3a+d; auf Startseite aber overruled, s. nachfolgend */
    font-size: 1.375rem; /* auf 22px erhöht, wg. Selbsthosting von Inter; U-bericht 4.3a; resp. U-bericht 3.7a.4a) und 3.18a) (5. MQ) */
    line-height: 1.1; /* U-bericht 4.3a, resp. U-bericht 3.7.2 */
    text-decoration: underline; /* U-bericht 4.3a+d; auf Startseite aber overruled, s. nachfolgend */
    margin-bottom: 16px; /* U-bericht 4.3a */
    padding-top: 16px; /* U-bericht 4.3a */
    padding-left: 40px; /* U-bericht 4.3c */
    padding-right: 40px; /* U-bericht 4.3c */
    font-weight: normal; /* wäre sonst bold per default und wg. Schrift-Selbsthosting; U-bericht 4.3b, 10.1 */
    font-style: normal; /* wg. Schrift-Selbsthosting; U-bericht 4.3b, 10.1 */
    overflow-wrap: break-word; /* guter ZU; aus FF/Blox übernommen, seit 2011 "overflow-wrap" statt word-wrap; U-bericht 4.3b */
}

/* Nur auf der Startseite ist die h2 NICHT unterstrichen; U-bericht 4.3d */
.h2-startseite-linksbue-nichtunt {
    /* text-align: left; nachträglich wieder auskommentiert zu Gunsten von h2-center, da vor allem in MQ mit ZU besser so */
    text-decoration: none;
}

/* h3, U-bericht 4.4, 10.1; s.o. Basisstyles 2.1 */
h3 {
    text-align: left; /* default, aber wegen "explizit, damit erkennbar" ergänzt; U-bericht 4.4a */
    font-size: 1.1875rem; /* von 17 auf 19 erhöht, weil bold + 17 zu "untersetzt" und wg. Selbsthosting von Inter; U-bericht 4.4a; resp. U-bericht 3.7a.4a) und 3.18a) (5. MQ) */
    line-height: 1.25; /* U-bericht 4.4a, resp. U-bericht 3.7.2 */
    text-decoration: none; /* default, aber wegen "explizit, damit erkennbar" ergänzt; U-bericht 4.4a */
    font-weight: 600; /* Schrift-Selbsthosting, U-bericht 4.4a, 10.1 */
    font-style: normal; /* Schrift-Selbsthosting, U-bericht 4.4a, 10.1 */
    margin-bottom: 0px; /* Text soll zwar mit etwas Abstand beginnen, aber durch padding bewirkt, s.u.; U-bericht 4.4a */
    padding-top: 16px; /* ergibt insges. dann 2 Absätze Abstand; U-bericht 4.4a */
    padding-bottom: 6px; /* damit etwas mehr Abstand als wie bei normaler Zeile; U-bericht 4.4a */
    overflow-wrap: break-word; /* für guten ZU; wohl überflüssig, aber ergänzt wg. "explizit, damit erkennbar"; U-bericht 4.4a */
}

/* 2.3 Vertikale Abstände zu h1, h2, h3 und eingefügte before-Trenner */

/* H2: vertikale Abstände zur h2 und before-eingefügte Content-Trenner; U-bericht 4.3e */
h2.h2-be-17m {
    margin-top: 39px;
}

/* Auf freieseelen-Startseite */
h2.h2-be-12m {
    margin-top: 24px;
}

/* Abstand ganz oben bei erster H2 nicht per class oder id möglich, also über figure-Klasse "toc-bild" des TOC-Bildes gelöst, s. 7.4 unten */


/* Eingefügter Schnörkel-Trenner, der h2-Abschnitte trennt */
h2.h2-tr2-12m:before {
display: block;
content: url("../grafiken/trenn2.png"); 
text-align: center;
margin-top: -20px;
margin-bottom: 36px;
} 

/* H3 und oberhalb/vorher per before eingefügte Content-Trenner; U-bericht 4.4d */
h3.h3-tr3-12m:before {
display: block;
content: url("../grafiken/trenn3.gif"); 
text-align: center;
margin-top: -20px;
margin-bottom: 36px;
}

h3.h3-tr2-12m:before {
display: block;
content: url("../grafiken/trenn2.png"); 
text-align: center;
margin-top: -20px;
margin-bottom: 36px;
} 

/* 2.4 Weitere vertikale Abstände, mit oder ohne eingefügte before-Trenner; U-bericht 5. */

/* Tr3 als Abschluss-Trenner; Klasse ohne HTML-El. davor, weil fuer a)nachoben-Link und b)figure mit Teilen-Buttons drin; */
.tr3-abschluss:before {
display: block;
content: url("../grafiken/trenn3.gif"); 
text-align: center;
margin-top: 1px;
margin-bottom: 12px;
} 

/* Freie Zeile oberhalb für 3 Fälle: nach H3 als Ausnahme; vor erstem Absatz bei z.B. Liebesratgeber; im Footer */
p.freizeile-h3 { margin-top: 9px; } 


/* 2.5 Basistyles des div-wrapper/grid container, nur als Verweis */
/* Basisstyles beim div-wrapper bzw. grid-container sind gleich nachfolgend bei 3.: alle Styles unterhalb der "areas", die nicht direkt dem Layout dienen; U-bericht 6. */


/* 3. Layout: grid mit grid-template-areas; Grid-Skript 4.3 */

/* Weder gap noch gap-row oder gap-column definiert, da Abstände unterschiedlich und alles einheitlich in Px sein soll; daher individuell bei den großen Struktur-El. festgelegt */
div.grid-container { 
    display: grid;
    max-width: 1115px; /* für die faktische Gesamtbreite plus 2x9px padding und 2x2px-border = 1137px; U-bericht 6. */
    grid-template-columns: 1fr 3.3fr 1fr; /* alle drei Spalten sind fluid-resp., da relative fr-Werte; s. Responsivskript 4.1.2b) */
    grid-template-rows: auto auto auto auto; /* ist default und daher eigentlich überflüssig, aber "explizit, damit erkennbar" */
    grid-template-areas: 
    "header header header"
    "headnav headnav headnav"
    "sidenav main aside"
    "   .   footer  .   "; /* Footer hat Breite der Mittelspalte durch "Whitespace-Punkte"; U-bericht Footer, 2.1. */
    background-color: #fffefd; /* überschreibt weinrote body-HG-Farbe; ist weicher/augenschonender als Reinweiß; U-bericht 6. */
    margin-left: auto; /* zentriert die ganze Website, genau wie in WP/Blox; U-bericht 6. */
    margin-right: auto; /* zentriert die ganze Website, genau wie in WP/Blox; U-bericht 6. */
    padding: 9px; /* allseitig das gleiche padding, ergibt einen Rahmen; U-bericht 6. */
    border: 2px solid black; /* 2x2px-border + 2x9px Seiten-padding + 1115px wrapper = 1137px insges.; wie bei WP/Blox; U-bericht 6. */
    margin-top: 3px; /* so klebt der wrapper-Rand oben nicht am Viewport; U-bericht 6. */
    margin-bottom: 3px; /* so klebt der wrapper-Rand unten nicht am Viewport, vorher hatte ich 0px; U-bericht 6. */
    border-radius: 6px; /* allseitig die gleichen runden Ecken; einheitlich mit header, nav, ÜSB; U-bericht 6. */
}


/* 4. header; komplett mit header-tag, img, <a>, figure und responsive; noscript ist hier, im Basislayout im header! */

/* U-Bericht header und resp. U-Bericht 3.12 */
header {
    grid-area: header; /* gehört inhaltlich zum Layout, weil ein Grid-Styling */
    border-style: none; /* explizit deaktiviert; Rand existiert, ist aber unsichtbar; U-bericht 1. und Design-Mode-Skript 12a */
    border-top-left-radius: 0px; /* explizit deaktiviert; runde Ecken kommen vom Bild selbst; U-bericht 1.+4. und Design-Mode-Skript 12a */
    border-top-right-radius: 0px; /* explizit deaktiviert; runde Ecken kommen vom Bild selbst; U-bericht 1.+4. und Design-Mode-Skript 12a */
    border-bottom-right-radius: 0px; /* explizit deaktiviert; runde Ecken kommen vom Bild selbst; U-bericht 1.+4. und Design-Mode-Skript 12a */
    border-bottom-left-radius: 0px; /* explizit deaktiviert; runde Ecken kommen vom Bild selbst; U-bericht 1.+4. und Design-Mode-Skript 12a */
    box-shadow: none; /* ist default, aber wegen Vollständigkeit/Klarheit ergänzt; Schlagschatten kommt vom Bild selbst; U-bericht 4. */
    overflow: visible; /* Aus FF/Blox vorsichtshalber übernommen; U-bericht 4. */
    width: 100%; /* Aus FF/Blox vorsichtshalber übernommen, brauche ich das noch? U-bericht 4. */
    margin-bottom: 15px; /* U-bericht 4.+5. und Design-Mode-Skript 12c */
    position: relative; /* der noscript-Hinweis wird prominent "auf" dem Header und seiner Grafik sichtbar, s. noscript unten; resp. U-Bericht 3.12b)+c)+e) */
}

/* noscript-Hinweis bei deaktiviertem JS; resp. U-bericht 3.12+3.7a.4c); s.o. Basisstyles 2.1 */
header > noscript {
    position: absolute; /* der noscript-Hinweis wird prominent "auf" dem Header und seiner Grafik sichtbar, s. header oben; resp. U-bericht 3.12c)+e) */
    z-index: 9; /* der noscript-Hinweis wird prominent "auf" dem Header und seiner Grafik sichtbar, s. header oben; resp. U-bericht 3.12c)+e)*/
    top: -3%; /* so etwas oberhalb des header-El., dank "%" sich gut anpassend für Smartphones; resp. U-bericht 3.12c)+e) */
    left: 50%; /* so ist der noscript-Hinweis flexibel immer in der Mitte des header-tag; resp. U-bericht 3.12c)+e) */
    transform: translate(-50%); /* so ist der noscript-Hinweis flexibel immer in der Mitte des header-tag; resp. U-bericht 3.12c)+e) */
    padding: 1%; /* dank "%" sich gut anpassend für Smartphones; resp. U-bericht 3.12e) */
    background-color: white; /* resp. U-bericht 3.12e) */
    text-align: center; /* resp. U-bericht 3.12e) */
    font-size: 1rem; /* 16px; resp. U-bericht 3.12e) + 3.7a.4c), Selbsthosting der Schrift */
    border: 6px double red; /* resp. U-bericht 3.12e) */
    border-radius: 6px; /* resp. U-bericht 3.12e) */
}


/* Headergrafik/Bild selbst (img) */
img.headergrafik {
    box-shadow: #6A3333 3px 4px 3px; /* U-bericht 1. und Design-Mode-Skript 12b */
    border-top-left-radius: 9px; /* U-bericht 1. und Design-Mode-Skript 12b */
    border-top-right-radius: 9px; /* U-bericht 1. und Design-Mode-Skript 12b */
    border-bottom-left-radius: 9px; /* U-bericht 1. und Design-Mode-Skript 12b */
    border-bottom-right-radius: 9px; /* U-bericht 1. und Design-Mode-Skript 12b */
    outline: none; /* ist zwar default, trotzdem aus FF/Blox übernommen; U-bericht 3. */
    max-width: 100%; /* aus FF/Blox übernommen, zumal nötig für Resp., allerdings brauche ich auch height auto, U-bericht 3. */
    height: auto; /* genau wie max-width 100% wegen Resp. nötig, U-bericht 3. */
    vertical-align: bottom; /* mit default "baseline" hatten a, figure, header 218px Höhe statt 215; mit bottom alle 215px, wie in WP/Blox, U-bericht 8. */
}

/* Damit wird die Klickfläche des Link so groß wie sein größeres KIND-El (!), das img-Bild; width/height überflüssig? U-bericht 6. */
a.headergrafik-link {
    display: block;
    width: 100%; /* übernommen von FF/Blox, vermutlich überflüssig */
    height: 100%; /* übernommen von FF/Blox, vermutlich überflüssig */
}

/* Für resp. Verkleinerung nötige, explizite width-Angabe für figure-BE des img; U-bericht 7. */
figure.headergrafik-blockel {
    max-width: 930px; /* zusätzliches "width: 100%" wie bei Bsp. 13 weggelassen */
}



/* 5. Horiz. Header-Navigation; komplett mit nav-tag, ul, li, <a> und current page; auch button */

/* nav-tag, mit Klasse, da es zwei navs gibt */
nav.headnav {
    grid-area: headnav; /* gehört inhaltlich zum Layout, da ein Grid-Styling */
    width: fit-content; /* damit width 100% ersetzt; die Navi wird nur noch so breit wie die 6 Items; durch Probieren gefunden; bricht auch um bei Tablets in 2. Zeile; U-bericht 2.9 */
    background-color:#fffbf1; /* Design-Mode-Skript 14.3 */
    border: 1px solid black; /* U-bericht 2. und Design-Mode-Skript 3. */
    border-radius: 6px; /* alle vier Ecken sind mit 6px rund gemacht; Design-Mode-Skript 6. */
    box-shadow: #6A3333 3px 3px 3px; /* Design-Mode-Skript 13. */
    margin-top: 0px; /* die Abstände erfolgen durch die anderen Strukturelemente; Design-Mode-Skript 3. */
    margin-bottom: 0px; /* die Abstände erfolgen durch die anderen Strukturelemente; Design-Mode-Skript 3. */
    overflow: visible; /* aus FF/Blox übernommen, aber brauche ich das? */
    /* float: left;  aus FF/Blox übernommen, aber das brauche ich wohl nicht */
    /* -moz-box-sizing: border-box;   
    box-sizing: border-box;  brauche ich das jetzt noch, ohne WP/Blox ? */
}


ul.headnav-haupt-ul {
    list-style-type: none; /* Aufzählungspunkte entfernen, Resp.-Skript 8.1.3b) und U-bericht 2. */
    display: inline-block; /* aus FF/Blox übernommen, aber brauche ich das? */
    width: 100%; /* aus FF/Blox übernommen, aber brauche ich das? Wäre auto besser? */
}

.headnav-haupt-ul li {
    display: inline-block; /* für li NEBENeinander; ist besser als display: inline, Resp.-Skript 8.1.3f)+g) und U-bericht 2. */
}

.headnav-haupt-ul li > a {
    display: block; /* Klickfläche auf Größe des <li> vergrößern; Resp.-Skript 8.1.3g) und U-bericht 2. */
    width: auto; /* ist default, brauche ich evtl. wg. Zentrierung der anchor und/oder damit immer alles drin bleibt im <li>, ohne overflow? U-bericht 2.5+2.3 */
    font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* s.o. Basisstyles, 2.1; Design-Mode-Skript 4., U-bericht 2.+2.5, resp. U-bericht 3.7a.4b) */
    font-style: normal; /* s.o. Basisstyles, 2.1; U-bericht 2.+2.5 */
    font-weight: normal; /* s.o. Basisstyles, 2.1; U-bericht 2.+2.5 */
    letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht 2.5 */
    font-size: 0.875rem; /* U-bericht 2. und Design-Mode-Skript 4.; resp. U-bericht 3.7.3, 14px wie beim body */
    text-decoration: none; /* Linkunterstreichung entfernen, Resp.-Skript 8.1.3c) und U-bericht 2. */
    padding-left: 13px; /* gleich große paddings li+re plus width: auto zentrieren anchor, Resp.-Skript 8.1.3h); Design-Mode-Skript 4. und U-bericht 2.1+2.3+2.4 */
    padding-right: 13px; /* gleich große paddings li+re plus width: auto zentrieren anchor, Resp.-Skript 8.1.3h); Design-Mode-Skript 4. und U-bericht 2.1+2.3+2.4 */
    padding-top: 14px; /* das ergibt 45px Gesamthöhe durch height+line-height:45px in WP/Blox, U-bericht 2.1+2.4 */
    padding-bottom: 14px; /* das ergibt 45px Gesamthöhe durch height+line-height:45px in WP/Blox, U-bericht 2.1+2.4 */
    outline: none; /* ist default, aber vorsichtshalber aus FF/Blox übernommen, wg. border/Schatten/runde Ecken; U-bericht 2.5 */
    white-space: normal; /* ist default, aber für guten Zeilenumbruch langer anchors resp. vorsichtshalber übernommen; U-bericht 2.5 */
    border-style: solid; /* U-bericht 2. und Design-Mode-Skript 5.1 */
    border-color: black; /* U-bericht 2. und Design-Mode-Skript 5.1 */
    border-right-width: 1px; /* U-bericht 2. und Design-Mode-Skript 5.1 */
    border-bottom-width: 1px; /* U-bericht 2. und Design-Mode-Skript 5.1 */
}

/* Der zwecks Resp. nachträglich im HTML ergänzte Menü-Button wird desktop-first ausgeblendet und erhält trotzdem gleich hier diverse Stylings, die er dann beim Einblenden hat; resp. U-Bericht 3.9b) + 3.9h) */
button.headnav-button {
    display: none; /* resp. U-Bericht 3.9b) */
    width: 100%; /* i.V.m. "display block" für button + ul im MQ wird die Klickfläche so groß wie das gesamte parent-nav; resp. U-Bericht 3.9h) */
    background-color:#ffffc0; /* <button> erbt die neue HG-Farbe nicht von <nav> und braucht sie daher auch selbst; resp. U-Bericht 3.9h) */
    padding: 5px; /* nur 5px an allen 4 Seiten sind gut so; resp. U-Bericht 3.9h) */
    font-family: Inter, Verdana, sans-serif; /* U-bericht Basisstyles 2.+7.+10, resp. U-bericht 3.7.3, 3.7a.4c), 3.9b)+h); s.o. Basisstyles 2.1 */
    font-weight: bold; /* wg. Schrift-Selbsthosting, U-bericht Basisstyles 2.+7.+10, resp. U-bericht 3.7.3, 3.7a.4c), 3.9b)+h); */
    font-style: normal; /* wg. Schrift-Selbsthosting, U-bericht Basisstyles 2.+7.+10, resp. U-bericht 3.7.3, 3.7a.4c), 3.9b)+h); */
    font-size: 1.125rem; /* 18px; resp. U-Bericht 3.9h) */
    text-align: center; /* zwar bereits zentriert durch width 100% und gleiche paddings li/re, aber "explizit, damit erkennbar"; resp. U-Bericht 3.9h) */
    border-radius: 6px; /* jetzt beim button festgelegt, nicht mehr beim nav; resp. U-Bericht 3.9h) */
    border: 3px double black; /* Rand jetzt beim button festgelegt, nicht mehr bei nav; resp. U-Bericht 3.9h) */
    box-shadow: 0 0 0 1px black; /* Rand jetzt beim button festgelegt, nicht mehr bei nav; resp. U-Bericht 3.9h) */
}

/* Styling des Buttonpfeiles, sein seitlicher Abstand zum Buttontext; resp. U-Bericht 3.9a) */
button.headnav-button > span.button-pfeil {
    margin-left: 15px; 
}


/* current page in headnav hervorgehoben; U-bericht Link-states 6. */
/* gilt auch für sidenav, da alles gleich! 2 identische Codes an 2 Stellen wäre schlecht! */
a[aria-current="page"] { background-color:#fff698; }


/* 6. Vertik. Seiten-Navigation; komplett mit nav-tag, ul, li, <a> und Überschrift-Item; auch button */

nav.sidenav {
    grid-area: sidenav; /* gehört inhaltlich zum Layout, da ein Grid-Styling */
    background-color:#fffbf1; /* Design-Mode-Skript 14.3 */
    border: 1px solid black; /* U-bericht 2. und Design-Mode-Skript 3. */
    border-bottom-width: 0px; /* Responsiv-Skript 8.1.3e und U-bericht 2.2 und Design-Mode-Skript 5.2 */
    border-top-left-radius: 6px; /* Design-Mode-Skript 6. und U-bericht 6. */
    border-top-right-radius: 6px; /* Design-Mode-Skript 6. und U-bericht 6. */
    border-bottom-left-radius: 6px; /* Design-Mode-Skript 6. */
    border-bottom-right-radius: 6px; /* Design-Mode-Skript 6. */
    box-shadow: #6A3333 3px 5px 3px; /* Design-Mode-Skript 13. */
    margin-top: 30px; /* 3. und 5.3 in Design-Mode-Skript */
    overflow: hidden; /* damit die verschwundenen runden Ecken oben korrigiert, U-bericht 6.+8a */
    height: fit-content; /* damit wird die Navi wird nur noch so hoch wie die Items; durch Probieren gefunden; bricht auch um bei Tablets in 2. Zeile; U-bericht 9.+8a */
}

ul.sidenav-ul {
    list-style-type: none; /* Aufzählungspunkte entfernen, Resp.-Skript 8.1.3b) und U-bericht 2. */
    text-align: left; /* ist default, aber dennoch übernommen; vererbt sich bis zu <a>; U-bericht 2.3 und Resp.-Skript 8.1.3h) */
}

/*.sidenav-ul li {
    ohne display inline-block und word/letter-spacing bleibt kein Styling übrig für <li> 
} */

.sidenav-ul li > a {
    display: block; /* Klickfläche auf Größe des <li> vergrößern; Resp.-Skript 8.1.3g) und U-bericht 2. */
    width: auto; /* ist default, brauche ich aber, wie Deakt. im FF zeigt; aus FF/Blox übernommen; U-bericht 7. */
    height: auto; /* ist default; wg. anchor-Umbruch vorsichtshalber aus FF/Blox übernommen; U-bericht 7. */
    font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* s.o. Basisstyles, 2.1; Design-Mode-Skript 4., U-bericht 2.+7., resp. U-bericht 3.7a.4b) */
    font-style: normal; /* s.o. Basisstyles, 2.1; U-bericht 2.+7. */
    font-weight: normal; /* s.o. Basisstyles, 2.1; U-bericht 2.+7. */
    letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht 7. */
    font-size: 0.875rem; /* U-bericht 2. und Design-Mode-Skript 4.; resp. U-bericht 3.7.3, 14px wie beim body*/
    text-decoration: none; /* Linkunterstreichung entfernen, Resp.-Skript 8.1.3c) und U-bericht 2. */
    padding-left: 12px; /* gleich große paddings li+re zentrieren Linktext, Resp.-Skript 8.1.3h); Design-Mode-Skript 4. und U-bericht 2.3 */
    padding-right: 12px; /* padding li+re für seitliche Abstände, Resp.-Skript 8.1.3h) und Design-Mode-Skript 4. und U-bericht 2.3*/
    padding-top: 12px; /* 1px mehr als in WP/Blox, U-bericht 4. */
    padding-bottom: 12px; /* 1px mehr als in WP/Blox, U-bericht 4. */
    outline: none; /* ist default, aber vorsichtshalber aus FF/Blox übernommen, wg. border/Schatten/rundeEcken; U-bericht 7. */
    white-space: normal; /* für guten ZU langer anchors resp. und weil in sidenav <li> kein inline-block sein darf, s.Resp.-Skript 8.1.3f+g; U-bericht 2.1 */
    border-style: solid; /* U-bericht 2. und Design-Mode-Skript 5.2 */
    border-color: black; /* U-bericht 2. und Design-Mode-Skript 5.2 */
    border-bottom-width: 1px; /* Responsiv-Skript 8.1.3e und U-bericht 2.2 und Design-Mode-Skript 5.2 */
    line-height: normal; /* ist default, aber "explizit, damit erkennbar", denn bei Blox/WP waren 18px erforderlich, s. altes Stylesheet; U-bericht 3. und resp. U-bericht 3.7.2 */
}

/* Ersten Menuepunkt in sidenav als Ueberschrift stylen und hover-Unterstreichung entfernen; Design-Mode-Skript 16., U-bericht 1.+5., resp. U-bericht 3.7a); s.o. Basisstyles 2.1 */
li.headingitem-ganz > a {
    font-size: 1rem; /* resp. U-bericht 3.1 + 3.7.3; 16px */
    line-height: 1.2; /* resp. U-bericht 3.1 + 3.7.1, 3.7.2, 3.7.3 */
    font-family: Gelasio, Georgia, serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal; /* eliminiert 0.015rem der anderen Links (mit Inter Tight), resp. U-bericht 3.7a.4b) und U-bericht 5. */
    text-decoration: none;
    color: black;
    background-color: #fdd2cb;
} 

/* Der zwecks Resp. nachträglich im HTML ergänzte Menü-Button wird desktop-first ausgeblendet und erhält trotzdem gleich hier diverse Stylings, die er dann beim Einblenden hat; resp. U-Bericht 3.9b) + 3.9n) */
button.sidenav-button {
    display: none; /* resp. U-Bericht 3.9b) */
    width: 100%; /* i.V.m. "display block" für button + ul im MQ wird die Klickfläche so groß wie das gesamte parent-nav; resp. U-Bericht 3.9n) */
    background-color:#ffffc0; /* <button> erbt die neue HG-Farbe nicht von <nav> und braucht sie daher auch selbst; resp. U-Bericht 3.9n) */
    padding: 5px; /* nur 5px an allen 4 Seiten sind gut so; resp. U-Bericht 3.9n) */
    font-family: Inter, Verdana, sans-serif; /* U-bericht Basisstyles 2.+7.+10, resp. U-bericht 3.7.3, 3.7a.4c), 3.9b)+n); s.o. Basisstyles 2.1 */
    font-weight: bold; /* wg. Schrift-Selbsthosting, U-bericht Basisstyles 2.+7.+10, resp. U-bericht 3.7.3, 3.7a.4c), 3.9b)+n); */
    font-style: normal; /* wg. Schrift-Selbsthosting, U-bericht Basisstyles 2.+7.+10, resp. U-bericht 3.7.3, 3.7a.4c), 3.9b)+n); */
    font-size: 1.125rem; /* 18px; resp. U-Bericht 3.9n) */
    text-align: center; /* zwar bereits zentriert durch width 100% und gleiche paddings li/re, aber "explizit, damit erkennbar"; resp. U-Bericht 3.9n) */
    border-radius: 6px; /* jetzt beim button festgelegt, nicht mehr beim nav; resp. U-Bericht 3.9n) */
    border: 3px double black; /* Rand jetzt beim button festgelegt, nicht mehr bei nav; resp. U-Bericht 3.9n) */
    box-shadow: 0 0 0 1px black; /* Rand jetzt beim button festgelegt, nicht mehr bei nav; resp. U-Bericht 3.9n) */
}


/* Styling des Pfeiles, sein seitlicher Abstand zum Buttontext; resp. U-Bericht 3.9a) */
button.sidenav-button > span.button-pfeil {
    margin-left: 15px;
}


/* current page in sidenav hervorgehoben; U-bericht Link-states 6. */
/* siehe oben bei headernav, da alles gleich! 2 identische Codes an 2 Stellen wäre schlecht */


/* 7. Hauptcontent/main komplett: neuer Rahmen, Abstände, TOC+TOC-Bild, article, section, p, ul, Contentbilder (auch resp.), Teilen-Buttons, Trenner, Schrift, Teaser-Absätze, Angebot-Absätze */

main {
    grid-area: main; /* gehört inhaltlich zum Layout, da ein Grid-Styling */
    border: 2px solid #62b8c8; /* neuer 2px-Rahmen, der mit box-shadow-"Rahmenschatten" 3px ergibt; U-bericht 2.11 */
    box-shadow: black 0px 0px 0px 1px; /* "Rahmenschatten"; ergibt gemeinsam mit border einen 3px-Rahmen; U-bericht 2.11 */
    border-top-left-radius: 6px; /* für neuen Rahmen, einheitlich mit runden Ecken von Navi und ÜSB; U-bericht 2.11 */
    border-top-right-radius: 6px; /* für neuen Rahmen, einheitlich mit runden Ecken von Navi und ÜSB; U-bericht 2.11 */
    border-bottom-left-radius: 6px; /* für neuen Rahmen, einheitlich mit runden Ecken von Navi und ÜSB; U-bericht 2.11 */
    border-bottom-right-radius: 6px; /* für neuen Rahmen, einheitlich mit runden Ecken von Navi und ÜSB; U-bericht 2.11 */
    margin-top: 30px; /* aus FF/Blox übernommen, U-bericht 2.2 und Design-Mode-Skript 11.1*/
    margin-bottom: 10px; /* aus FF/Blox übernommen, U-bericht 2.2 */
    margin-left: 16px; /* absichtlich kein column-gap im grid-container; neuer Rahmen; U-bericht 2.3 + 2.11 */
    margin-right: 16px; /* absichtlich kein column-gap im grid-container; neuer Rahmen; U-bericht 2.3 + 2.11 */
    padding-left: 8px; /* wg. neuem Rahmen zusätzlich zum margin-left nötig; U-bericht 2.3 + 2.11 */
    padding-right: 8px; /* wg. neuem Rahmen zusätzlich zum margin-right nötig; U-bericht 2.3 + 2.11 */
    padding-top: 5px; /* Abstand zur h1 jetzt 5 statt 3px aus FF/Blox, U-bericht 2.1 + 2.11 */
    padding-bottom: 15px; /* ersetzt margin-bottom 10px und früheres article-styling; U-bericht 2.1 */
    line-height: 1.5; /* war vorher im Contenblock; Design-Mode-Skript 11.2 und U-bericht 2.1; resp. U-bericht 3.7.1+3.7.2 */
    /* overflow: visible;  wg. neuem Rahmen mit padding ist ein "overflow" nicht mehr möglich!? Design-Mode-Skript 11.2 und U-bericht 2.1 */
}

/* Neuer <hr>-Trenner nach 1. Absatz auf Startseite; U-bericht 2.10+1.3 */
article > hr {
    width: 35%;
    border: 1px solid #f5db1b;
    margin-bottom: 15px;
}


/* Violetter trenn1-Trenner in eigenem div (Deko-Grafik): Abstände, Zentrierung, resp.; U-bericht Hauptcontent kleine Seiten, 1. */
div.tr1-violett {
    margin-top: 0px; /* U-bericht Hauptcontent kleine Seiten, 1.3 */
    margin-bottom: 9px; /* U-bericht Hauptcontent kleine Seiten, 1.3 */
    margin-left: auto; /* U-bericht Hauptcontent kleine Seiten, 1.3 */
    margin-right: auto; /* U-bericht Hauptcontent kleine Seiten, 1.3 */
    max-width: 350px; /* macht resp.; U-bericht Hauptcontent kleine Seiten, 1.4 */
} 

/* resp. Standardcode für trenn1-img im obigen div */
div.tr1-violett img {
    max-width: 100%;
    height: auto; 
    } 

/* hier im Hauptcontent sollen die anchors wie üblich blau sein; U-bericht 2.5 und Design-Mode-Skript 2b */
main a { 
    color: #0c0095; 
    text-decoration: underline;
} 

/* Nach-oben-Link wird dadurch nicht blau, sondern wieder schwarz; vorher so im alten Stylesheet; U-bericht 2.5 */
a.nach-oben { 
    color: black; 
    text-decoration: underline;
}

/* vorher unbemerkter Standard für p im Design-Editor! U-bericht 2.1; article ergänzen um section? */
article p { margin-bottom: 15px; }

/* vorher unbemerkter Standard für p im Design-Editor! U-bericht 2.1 + 2.9c; div durch passenderes HTML-El. ersetzen? */
main > div > p, main > div > figure.tr3-abschluss { margin-bottom: 15px; }

/* Abstand der Autoren-Byline nach oben; U-bericht 2.1; */
.abstand-byline { padding-top: 17px; }

/* main-Textabsätze (p, ul, figcaption) mit sinnvoller Silbentrennung; U-bericht 2.13 */
main > article > p, 
main > article > ul,
main > article > figure.twopics-respo > figcaption,
main > article > section > p, 
main > article > section > ul,
main > article > section > figure.twopics-respo > figcaption {
    hyphens: auto;
    hyphenate-limit-chars: 9 3 4; 
}

/* article {
    overflow: visible; lt. FF/Blox, hier aber wohl nicht sinnvoll, weil Buchstaben auf sichtbaren Rändern sichtbar schlecht wären!? U-bericht 2.1 
} */

/* Zentrierte Deko-Grafik mit eigener Klasse; in FF/Blox über aligncenter-Klasse; U-bericht 2.6 */
div.deko-zentriert { text-align: center; }

/* ul im Hauptcontent, 3 default-Werte sowie padding und margin alles explizit festgelegt; vorher unbemerkt als Standards in Blox */
ul.hauptcontent {
    list-style-type: disc; /* default, trotzdem angelegt; U-bericht 2.4 */
    list-style-position: outside; /* default, trotzdem angelegt; Umstellunmgsbericht 2.4 */
    list-style-image: none; /* default, trotzdem angelegt; U-bericht 2.4 */
    padding: 0 0 0 30px; /* der Einzug links ist 30px, vorher waren es 40px; U-bericht 2.4 */
    margin: 0 0 15px 0; /* unten 15px, analog zu "article p" oben und figcaption bei 7.3; U-bericht 2.4 */
}

/* Kleiner "Absatz" zwischen "großen" Listenpunkten, die mind. 2 Zeilen haben; bereits im alten Stylesheet so drin; U-bericht 2.4 */
.li-absatz { margin-bottom: 7px; } 


/* Ersatz fuer bold-tags, wg. Hierarchie und HTML5; hatte ich vorher im alten Stylesheet drin */
span.fett-worte { font-weight: bold; } 


/* Die Teilen-Buttons, U-bericht 2.9 */

/* Die beiden figure-BE sollen nebeneinander stehend aufrücken, U-bericht 2.9a */
figure.teilen-button {
    display: inline-block; 
}

/* Die Klickfläche des Links wird so groß wie das Bild, U-bericht 2.9b */
a.fb-teilen, a.xing-teilen {
    display: block; 
} 

.fb-teilen img, 
.xing-teilen img {
    max-width: 61px; /* soll evtl. resp. Vergrößerung verhindern, Verkleinerung ist nicht möglich; U-bericht 2.9c */
    margin-left: 3px; /* U-bericht 2.9e+c */
    margin-right: 3px; /* U-bericht 2.9e+c */
    vertical-align: bottom; /* U-bericht 2.9e+c */
} 

/* Neuer, doppelter hover-Rahmenschatten in gelb, U-bericht 2.9d; verschoben zu Link-states und geändert */


/* Teaser-Absatz nach H2 bekommt Umrandung bzw. eine Box und fette Schrift; U-bericht Contentseite 12.1 */
p.boxteaserh2 {
    border: 2px solid #62b8c8;
    padding: 5px;
    font-weight: bold;
} 

/* Teaser-Absatz nach H3 bekommt Umrandung bzw. eine Box, fette Schrift, mehr Abstand; U-bericht Contentseite 12.1 */
p.boxteaserh3 {
    border: 2px solid #62b8c8;
    padding: 5px;
    font-weight: bold;
    margin-top: 4px;
    margin-bottom: 10px;
} 

/* Angebot-Absatz am Ende des ersten H2-Abschnittes und ganz am Schluss; U-bericht Contentseite 12.2 */
p.angebot-im-text {
    border: 4px double #e9ce01;
    padding: 5px;
} 


/* 7.1 Einzelbild mit caption, aber ohne ru-Text im Hauptcontent; Startseite; U-bericht 2.8 */

figure.einzelbild-caption {
    text-align: center; /* vererbend werden alle figure-Inhalte zentriert; U-bericht 2.8d */
    max-width: 300px; /* macht resp.; U-bericht 2.8c */
    border: 1px solid black; /* U-bericht 2.8b */
    border-radius: 7px; /* Design-Mode-Skript 11.4 und U-bericht 2.8b */
    padding: 0px 0px 3px 0px; /* durch die 0px wird Bild nicht mehr "verkleinert unscharf"; Design-Mode-Skript 11.4 und U-bericht 2.8e */
    margin-top: 7px; /* Design-Mode-Skript 11.4 und U-bericht 2.8e */
    margin-bottom: 3px; /* Design-Mode-Skript 11.4 und U-bericht 2.8e */
    margin-left: auto; /* zentriert gesamtes figure-BE; U-bericht 2.8c */
    margin-right: auto; /* zentriert gesamtes figure-BE; U-bericht 2.8c */
}

figure.einzelbild-caption > img {
    max-width: 100%; /* macht resp.; U-bericht 2.8c */
    height: auto;/* macht resp.; U-bericht 2.8c */
    border: none; /* so sehen die Ecken besser aus; Design-Mode-Skript 11.4 und U-bericht 2.8e */
    border-top-left-radius: 6px; /* Design-Mode-Skript 11.4 und U-bericht 2.8b */
    border-top-right-radius: 6px; /* Design-Mode-Skript 11.4 und U-bericht 2.8b */
    border-bottom-left-radius: 0px; /* Vorher waren die Ecken auch UNTEN gerundet; Design-Mode-Skript 11.4 und U-bericht 2.8b */
    border-bottom-right-radius: 0px; /* Vorher waren die Ecken auch UNTEN gerundet; Design-Mode-Skript 11.4 und U-bericht 2.8b */
    padding: 0px; /* default durch CSS-Reset, aber so ist es "explizit, damit erkennbar"; Design-Mode-Skript 11.4 und U-bericht 2.8e */
    margin: 0px; /* default durch CSS-Reset, aber so ist es "explizit, damit erkennbar"; Design-Mode-Skript 11.4 und U-bericht 2.8e */
}

figure.einzelbild-caption > figcaption {
    text-align: center; /* caption bereits vom figure-center zentriert, aber "explizit, damit erkennbar"; U-bericht 2.8d */
    margin: 1px 0px 0px 0px; /* 1 statt 5px, weil jetzt die normale line-height wirkt, in WP/Blox war das anders; U-bericht 2.8d */
    padding: 0px 3px 0px 3px; /* Damit die Worte seitlich nicht am Rand kleben können; U-bericht 2.8d */
}


/* 7.2 Einzelbild mit caption und ru-Text im Hauptcontent */ 
/* Für alle Stylings siehe neues Bilderskript 4.2c, U-bericht Contentseite 8.1, Resp.-Skript 7.6.6c und U-bericht Startseite 2.8, weil sehr viel vom Startseiten-Einzelbild übernommen */

figure.einzelbild-caption-ru {
    float: left; 
    text-align: center; /* U-bericht Startseite 2.8d */
    border: 1px solid black; /* U-bericht Startseite 2.8b */
    border-radius: 7px; /* Design-Mode-Skript 11.4 und U-bericht Startseite 2.8b */
    padding: 0px 0px 3px 0px; /* dank 0px wird Bild nicht mehr "verkleinert unscharf"; Design-Mode-Skript 11.4 und U-bericht Startseite 2.8e */
    margin-top: 7px; /* Design-Mode-Skript 11.4 und U-bericht Startseite 2.8e */
    margin-right: 5px; /* seitlicher Abstand zum ru-Text, U-bericht 8.1 und U-bericht Startseite 2.8e */
    margin-bottom: 3px; /* Design-Mode-Skript 11.4 und U-bericht Startseite 2.8e */
    margin-left: -2px; /* 2px über "Flucht" mit Text darüber/darunter hinaus, wg. Platzgewinnung für ru-Text; U-bericht Startseite 2.8e, Bilderskript 4.2d) */
}

figure.einzelbild-caption-ru-350resp {
    max-width: 350px; /* macht resp. */
}

figure.einzelbild-caption-ru-349resp {
    max-width: 349px; /* macht resp. */
}

figure.einzelbild-caption-ru-300resp {
    max-width: 300px; /* macht resp. */
}

figure.einzelbild-caption-ru-288resp {
    max-width: 288px; /* macht resp. */
}

figure.einzelbild-caption-ru-270resp {
    max-width: 270px; /* macht resp. */
}

figure.einzelbild-caption-ru-260resp {
    max-width: 260px; /* macht resp. */
}

figure.einzelbild-caption-ru-250resp {
    max-width: 250px; /* macht resp. */
}

figure.einzelbild-caption-ru-240resp {
    max-width: 240px; /* macht resp. */
}

figure.einzelbild-caption-ru-230resp {
    max-width: 230px; /* macht resp. */
}

figure.einzelbild-caption-ru-225resp {
    max-width: 225px; /* macht resp. */
}

figure.einzelbild-caption-ru-200resp {
    max-width: 200px; /* macht resp. */
}

figure.einzelbild-caption-ru-195resp {
    max-width: 195px; /* macht resp. */
}

figure.einzelbild-caption-ru-150resp {
    max-width: 150px; /* macht resp. */
}



figure.einzelbild-caption-ru > img {
    max-width: 100%; /* resp. Standardcode */
    height: auto;/* resp. Standardcode  */
    border: none; /* so sehen die Ecken besser aus; Design-Mode-Skript 11.4 und U-bericht Startseite 2.8e */
    border-top-left-radius: 6px; /* Design-Mode-Skript 11.4 und U-bericht Startseite 2.8b */
    border-top-right-radius: 6px; /* Design-Mode-Skript 11.4 und U-bericht Startseite 2.8b */
    border-bottom-left-radius: 0px; /* Vorher waren die Ecken auch UNTEN gerundet; Design-Mode-Skript 11.4 und U-bericht Startseite 2.8b */
    border-bottom-right-radius: 0px; /* Vorher waren die Ecken auch UNTEN gerundet; Design-Mode-Skript 11.4 und U-bericht Startseite 2.8b */
    padding: 0px; /* bereits im CSS-Reset, aber "explizit, damit erkennbar"; Design-Mode-Skript 11.4 und U-bericht Startseite 2.8e */
    margin: 0px; /* bereits im CSS-Reset, aber "explizit, damit erkennbar"; Design-Mode-Skript 11.4 und U-bericht Startseite 2.8e */
}

figure.einzelbild-caption-ru > figcaption {
    text-align: center; /* caption bereits vom figure-center zentriert, aber "explizit, damit erkennbar"; U-bericht  Startseite 2.8d */
    margin: 1px 0px 0px 0px; /* 1 statt 5px, weil jetzt die normale line-height wirkt, in WP/Blox war das anders; U-bericht  Startseite 2.8d */
    padding: 0px 3px 0px 3px; /* Damit die Worte seitlich nicht am Rand kleben können; U-bericht Startseite 2.8d */
}

/* Beendet das Umfließen nach gefloateten Bildern; gilt für Einzelbild mit caption und ru-Text und ebenso für nachf. Bilderpärchen */
.clear { clear: both; } 

/* Zu breite Einzelbilder (ab einschl. 350px) mit caption und ru-Text sollen nicht mehr floaten und außerdem zentriert sein; U-bericht Startseite 2.8e, U-bericht Contentseite 8.4; Bilderskript 4.2d) */
/* 350 bereits im Basislayout 7.2, aber "explizit, damit erkennbar" */
figure.einzelbild-caption-ru-350resp {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7px; 
}

/* U-bericht Startseite 2.8d), U-bericht Contentseite 8.5, Bilderskript 4.2c)+d)*/
figcaption.einzelbild-caption-artikel {
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: normal;
    font-style: italic;
}


/* 7.3 Bilderpärchen mit gemeinsamer figcaption im Hauptcontent */ 
/* Für ALLE Stylings siehe vor allem neues Bilderskript 4.3c)!!; U-bericht Contentseite 9., Resp.-Skript 7.6.6d */

/* figure mit Bilderpärchen drin wird resp.; normaler "Absatz"-Abstand nach figure fehlte */
figure.twopics-respo {
    max-width: 100%; /* "vermutlich" der passende Wert für max-width; s. neues Bilderskript 4.3c "Bilderp. resp. machen"; */
    margin-bottom: 15px; /* bisher nur im main für alle "article p" und ul, jetzt auch für Bilderpärchen-figure; U-bericht Contentseite 9.1 */
} 

/* Bilderpärchen nebeneinander wird resp.; beide img gefloatet (img, nicht figure!) */
figure.twopics-respo img {
    max-width: 43%; /* U-bericht Contentseite 9.1, neues Bilderskript 4.3c "Bilderp. resp. machen..." */ 
    height: auto; /* U-bericht Contentseite 9.1, neues Bilderskript 4.3c "Bilderp. resp. machen..." */
    float: left; /* U-bericht Contentseite 9.1, neues Bilderskript 4.3c "float für beide img..." */ 
    /* width: auto; ist default und es gibt bereits max-width, funktioniert auch ohne; daher auskommentiert; ? */
}  

/* Bilderpärchen: Abstaende beim 1. Bild zu weiterem Bild rechts (rb) */
img.img250-rb {
    margin-right: 10%; /* U-bericht Contentseite 9.1, neues Bilderskript 4.3c "Weitere Abstände..." */
    margin-bottom: 5px; /* U-bericht Contentseite 9.1, neues Bilderskript 4.3c "Weitere Abstände..." */
} 

figure.twopics-respo > figcaption {
    text-align: left; /* bereits default, aber "explizit, damit erkennbar"; neues Bilderskript 4.3c "figcaption..." */
}

/* CSS-clear zum Beenden des Umfließens siehe oben beim Einzelbild, Code gilt auch für Bilderpärchen! */


/* 7.4 TOC einschl. Bezeichnung "Inhaltsverzeichnis (klickbar):" und TOC-Bild */

/* Bezeichnung "Inhaltsverzeichnis (klickbar):" ist neu; U-bericht Contentseite 10.1, U-bericht Basisstyles 10., s.o. Basisstyles 2.1 */
p.wort-toc {
    font-family: Inter, Verdana, sans-serif; /* U-bericht Contentseite 10.1 */
    font-style: normal; /* U-bericht Contentseite 10.1 */
    font-weight: normal; /* U-bericht Contentseite 10.1 */
    font-size: 0.9375rem; /* 15px;  U-bericht Contentseite 10.1; resp. U-bericht 3.1 + 3.7.3 + 3.7a.4c)
    */
    text-indent: 41px;
    } 

/* TOC, ol-Liste muss padding und margin haben, wie bei ul-Liste im Content; U-bericht Contentseite 10.2b */
ol.ol-toc {
    padding: 0px 0px 0px 60px; /* angemessene Einrückung links; U-bericht Contentseite 10.2b */
    margin: 0px 0px 25px 0px; /* vertikale Abstände zu TOC-Bez. und TOC-Bild; U-bericht Contentseite 10.2b */
    list-style-image: none; /* zwar default, aber explizit wegen versch. Browser; U-bericht Contentseite 10.2b */
} 

/* TOC, h2-li; durch 1px größere Schrift, padding-top und 2px-underline gut hervorgehoben; die h2-li haben ZAHLEN per value im HTML, kein disc oder square! padding-top entzerrt die h2-"Blöcke" für desktop und mobile-Ansicht; U-bericht Contentseite 10.2b, U-bericht kleine Seiten 3.; s.o. Basisstyles 2.1 */
li.h2-toc { 
    font-size: 1rem; /* 16px; U-bericht 10.2b); resp. U-bericht 3.1 + 3.7.3 + 3.7a.4c) wg. Schrift-Selbsthosting */
    padding-top: 5px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
} 

 /* TOC, h2-Ankerlinks werden dadurch nicht blau dargestellt; U-bericht Contentseite 10.2b */
a.anchorblack { color:black; }  

/* TOC, h3 haben custom marker "Punkt" und sind eingerückt; U-bericht Contentseite 10.2b */
li.h3-toc {
    list-style-position: inside;
    list-style-type: "\2022"; 
    font-size: 0.9375rem; /* 15px; U-bericht 10.2b); resp. U-bericht 3.1 + 3.7.3 + 3.7a.4c) wg. Schrift-Selbsthosting */
} 

/* TOC, h3-li brauchen Abstand zwischen custom bullet und Text; U-bericht Contentseite 10.2a)+b) */
li.h3-toc > span {
    margin-left: 3px;
}

/* TOC-Bild, zentriert und hat Abstand nach unten */
figure.toc-bild {
    margin-bottom: 25px; /* 39px vorher war i.V.m. h2-top-padding(16px) unnötig viel; U-bericht Contentseite 11.3b */
    margin-left: auto; /* Zentrierung des gesamten figure-BE; U-bericht Contentseite 11.3b */
    margin-right: auto; /* Zentrierung des gesamten figure-BE; U-bericht Contentseite 11.3b */
}

/* TOC-Bild, macht figure resp.; für alle TOC-Breiten ein eigener Code, incl. seltener Contentbilder; U-bericht Contentseite 11.3a */
figure.toc-bild-350resp {
    max-width: 350px; 
}

figure.toc-bild-352resp {
    max-width: 352px; 
}

figure.toc-bild-360resp {
    max-width: 360px; 
}

figure.toc-bild-348resp {
    max-width: 348px; 
}

figure.toc-bild-471resp {
    max-width: 471px; 
}

figure.toc-bild-390resp {
    max-width: 390px; 
}

figure.toc-bild-330resp {
    max-width: 330px; 
}

figure.toc-bild-384resp {
    max-width: 384px; 
}

figure.toc-bild-320resp {
    max-width: 320px; 
}



/* TOC-Bild, resp. Standardcode für img; U-bericht Contentseite 11.3a */
figure.toc-bild img {
    max-width: 100%;
    height: auto;
}


/* 8. Über mich-Sidebar komplett: mit Profil-Buttons drin (neu! + resp.), normale Bilder (resp.), Überschrift, Abstände, Schrift, s.o. Basisstyles 2.1 */

aside {
    grid-area: aside; /* gehört inhaltlich zum Layout, da ein Grid-Styling */
    background-color:#fffbf1; /* Design-Mode-Skript 14.3 */
    height: fit-content; /* beschränkt die Höhe auf den content; ersetzt "auto" und min-height 95px; U-bericht 2.6 */
    margin-top: 30px; /* Design-Mode-Skript 8. und U-bericht 2.4 */
    text-align: center; /* U-bericht 2.5 */
    border: 1px solid black; /* Design-Mode-Skript 7.2 */
    border-radius: 6px; /* Design-Mode-Skript 7.2 */
    box-shadow: #6A3333 3px 5px 3px; /* Design-Mode-Skript 13. */
    padding-top: 11px; /* 1px weniger als vorher; Design-Mode-Skript 7.1 und U-bericht 2.2 */
    padding-right: 5px; /* Design-Mode-Skript 7.2 */
    padding-left: 5px; /* Design-Mode-Skript 7.2 */
    font-size: 0.875rem; /* 14px; Design-Mode-Skript 7.3; U-bericht 2.7, resp. U-bericht 3.1 + 3.7.3 + 3.7a.4c) wg. Schrift-Selbsthosting */
    overflow: hidden; /* vorsichtshalber aus FF/Blox übernommen; U-bericht 2.7 */
    /* float: left, box-sizing: borderbox, width: 100% nicht aus FF/Blox übernommen */
}

/*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.8, U-bericht Link-states 2.1a, resp. U-bericht 3.7.2 */
aside p, aside figcaption {
    line-height: 1.4;
}

/* Vertikale Abstände zwischen den Elementen der ÜSB, U-bericht 2.3 */
.elemente-abstand-unten {
margin: 0 0 15px;
}

/* Ausnahme von der Zentrierung, die beim aside oben festgelegt ist, U-bericht 2.5 */
.libuendig {
    text-align: left;
}

/* Die faktische Überschrift, die aber kein h2 oder h3 ist; U-bericht 1.2+2.2, resp. U-bericht 3.7a), s.o. Basisstyles 2.1 */
span.ueberschrift-uebermich {
    font-family: Gelasio, Georgia, serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.375rem; /* resp. U-bericht 3.1 + 3.7.3; 22px */
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
}

/* Profilbuttons bez. HTML ganz neu, U-bericht 1.1! */

/* Die beiden figure-BE sollen nebeneinander stehend aufrücken und haben neue Klasse "profil-button" erhalten; U-bericht 3.1+3.2a) */
figure.profil-button {
    display: inline-block; 
    margin-left: 2px; /* U-bericht Link-states 2.1b und 2.1+3.2d bei ÜSB */
    margin-right: 2px; /* U-bericht Link-states 2.1b und 2.1+3.2d bei ÜSB */
    margin-bottom: 5px; /* U-bericht Link-states 2.1b und 2.1+3.2d bei ÜSB */
}

/* Die Klickfläche des Links wird so groß wie das Bild, U-bericht 3.2b) */
a.fb-profil, a.xing-profil {
    display: block; 
} 

.fb-profil img, 
.xing-profil img {
    max-width: 25px; /* soll evtl. resp. Vergrößerung verhindern, Verkleinerung ist nicht möglich, U-bericht 3.2c) */
    margin-left: 3px; /* U-bericht 2.1 und 3. */
    margin-right: 3px; /* U-bericht 2.1 und 3. */
    margin-bottom: 1px; /* U-bericht 2.1 und 3. */
    margin-top: 1px; /* U-bericht Link-states 2.1b und 2.1+3.2d bei ÜSB*/
    vertical-align: middle; /* U-bericht Link-states 2.1b und 2.1+3.2d bei ÜSB */
} 

/* Neuer hover-Schatten bzw. "Rahmen" der Profilbuttons, U-bericht 2.1; verschoben zu Link-states ganz unten und geändert */

/* Portrait und Buchcover responsiv machen, bei img und figure; U-bericht 1.3, 1.5, 4. */
img.portrait, img.buchcover {
    max-width: 100%;
    height: auto;
} 

figure.portrait-maxwidth, figure.buchcover-maxwidth {
    max-width: 100%; /* hier nicht die native Px-Breite; U-bericht 4. */
}  


/* 9. Footer: komplett mit Schrift, hr-Trenner, copyscape-Grafik (resp.) */

/* footer-El. selbst: U-bericht 1.8, 2.5, 2.6 und 2.8 */
footer {
    grid-area: footer; /* gehört inhaltlich zum Layout, da ein Grid-Styling; footer hat Breite der Mittelspalte, s. grid-template-areas beim Grid; U-bericht 2.1 */
    background-color:#fffbf1; /* Design-Mode-Skript 14.3 */
    text-align: center; /* U-bericht 2.5 */
    border: 1px solid black; /* Design-Mode-Skript 10.1 */
    border-radius: 6px; /* Design-Mode-Skript 10.1 */
    box-shadow: #6A3333 3px 4px 3px; /* Design-Mode-Skript 13. */
    padding: 10px; /* Design-Mode-Skript 10.3 und U-bericht 2.6 */
    font-size: 0.8125rem; /* 13px; Design-Mode-Skript 10.2, U-bericht 1.8+2.8; resp. U-bericht 3.1 + 3.7.3, 3.7a.4b) */
    font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* s.o. Basisstyles, 2.1; Design-Mode-Skript 10.2, U-bericht 1.8+2.8; resp. U-bericht 3.7a.4b) */
    font-style: normal; /* s.o. Basisstyles, 2.1; U-bericht 2.8 */
    font-weight: normal; /* s.o. Basisstyles, 2.1; U-bericht 2.8 */
    letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht 2.8 */
    /* min-height 85px, height auto, float left, width 100%, overflow hidden und clear both aus FF/Blox brauche ich wohl nicht mehr */
}

/*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.4, U-bericht Link-states 2.1a, resp. U-bericht 1. */
footer p { line-height: 1.4; }

/* roter Copyright-Link; U-bericht 1.4 + 2.4 und U-bericht Link-states 3.2 */
a.roteschrift {
    color:#8f0116
}

/* semant. <hr>-Trennlinie, verkleinert sich resp. sehr gut; U-bericht 1.3 + 2.3 */
footer > hr {
    width: 35%;
    border: 1px solid #d1cfcf;
}

/* Copyscape-Grafik wird resp., analog zu ÜSB-Bildern 100% bei img und p-Container unten; U-bericht 1.5 + 3. */
footer > p > img {
    max-width: 100%;
    height: auto;
    border: 1px solid black; /* sieht gut aus; U-bericht 3. */
}

p.copy-maxwidth { max-width: 100%; } /* mit neuer Klasse; U-bericht 3. */

/* Änderungsdatum durch "span.fett-worte" und "p.freizeile-h3", die es aber beide bereits gibt: bei 7. main/Hauptcontent 2.4 Basisstyles, weitere Abstände */


/* 10. Link-states, außer unbesuchter Normalzustand und current page, die bei headernav gestylt ist; U-bericht Link-states, 1.-5. */

/* Link-state visited für Links im Artikel samt "nach oben"; U-bericht Link-states 5. */
article a:visited,
main > div a:visited {
    color:purple;
    text-decoration: underline;
}

/* Link-state visited für Nav-Links, die entgegen Browser-defaults schwarz und ohne underline bleiben sollen; U-bericht Link-states, 5. */
nav > ul > li a[href]:visited {
    color: black;
    text-decoration: none;
}

/* Link-state visited für ÜSB-Links, Datenschutzlink im Footer sowie TOC-h2, die entgegen Browser-defaults schwarz und mit underline bleiben sollen; U-bericht Link-states, 5. */
a.anchorblack:visited,
aside a:visited,
footer a:visited {
    color: black;
    text-decoration: underline;
}

/* Link-state visited für Copyright-Footerlink, der entgegen Browser-defaults rot und mit underline bleiben soll; U-bericht Link-states, 5. */
footer a.roteschrift:visited {
    color: #8f0116;
    text-decoration: underline;
}

/* Link-state hover für alle Nav-Links mit href, also ohne Überschrift-Item; U-bericht, Link-states 3.1 */
nav > ul > li a[href]:hover {
    text-decoration:underline;
    background-color:#ffec8b;
} 

/* Link-state hover für Überschrift-Item, der explizit KEINEN Unterstrich bekommen soll; U-bericht, Link-states 3.1 */
li.headingitem-ganz > a:hover { text-decoration: none; }

/* DD-parent-Menuepunkt soll kein hover haben, indem der nicht-hover-Zustand explizit bewirkt wird; <a> ist nur über title-Attr. greifbar; FrS hat kein DD */
/* Ein als toggle-<button> per JS-Klick verwirklichter DD-Menüpunkt sollte aber doch focus, hover und sctive haben!?
nav.headnav > ul > li a[title *="Unter"]:hover {
    text-decoration:none;
    background-color:#fff8e8;
}*/

/* Link-state hover für Link in Headergrafik, Umstellungsbricht Link-states, 3.3 */
header > figure > a:hover {
    box-shadow: 0px 0px 0px 5px yellow, 0px 0px 0px 7px #d4bf01;
} 

/* Link-state hover für Links im Artikel samt "nach oben", TOC-h2, ÜSB, footer; U-bericht Link-states, 3.2 */
a.anchorblack:hover,
article a:hover,
main > div a:hover,
aside a:hover,
footer a:hover {
    background-color:#ffec8b;
}

/* Link-state hover für Teilenbutton-Links im Artikel, U-bericht Link-states, 3.4 */
a.fb-teilen:hover, a.xing-teilen:hover {
    box-shadow: 0px 0px 0px 3px yellow, 0px 0px 0px 5px #d4bf01;
}

/* Link-state hover für Profilbutton-Links im aside/ÜSB, U-bericht Link-states, 3.4 */
a.fb-profil:hover, a.xing-profil:hover {
    box-shadow: 0px 0px 0px 2px yellow, 0px 0px 0px 4px #d4bf01;
}

/* Link-state focus für beide Navs; U-bericht Link-states, 2.2 */
nav > ul > li a[href]:focus {
    text-decoration:underline;
    outline: 4px solid #a00565;
    outline-offset: -7px;
    /* Alternative: box-shadow: 0px 0px 0px 2px #ffffff inset, 0px 0px 0px 6px #a00565 inset; */
}

/* Link-state focus für Artikel und TOC-h2; U-bericht Link-states, 2.1c */
a.anchorblack:focus,
article a:focus,
main > div a:focus {
    outline: 2px solid #a00565;
    outline-offset: 2px;
}

/* Link-state focus für Headergrafik; U-bericht Link-states, 2.1d */
header > figure > a:focus {
    outline: 2px solid #a00565;
    outline-offset: 5px;
}

/* Link-state focus für ÜSB und Footer; U-bericht Link-states, 2.1a+b; */
aside a:focus, 
footer a:focus {
    outline: 2px solid #a00565;
    outline-offset: 1px;
}

/* Link-state active für alle Bereiche, ohne Headergrafik und Profil/Teilenbuttons; U-bericht Link-states, 4. */
a.anchorblack:active,
article a:active,
main > div a:active,
aside a:active,
footer a:active,
nav > ul > li a[href]:active {
    background-color: #c1ffc1;
} 


/* 11. Media Queries */

/* ******* 11.1: 1. MQ nach dem desktop-Layout, 830px/51.875em - 960px/60em, explizites MQ ******* */
/* 2 Spalten, aside wandert nach unten; alle font-sizes/line-heights/vertik. Abstände bleiben ohne Verkleinerung erhalten; umfließender Bildtext klappt für alle Bilder (Ausnahme 350px wie bei desktop); resp. U-bericht 2.4, 2.5a)-c), 3.15a)-f) */
@media screen and (min-width: 51.875em) and (max-width: 60em) {
    /* Gridcontainer; hier im MQ mit zwei Spalten, für Sidenav und Hauptcontent, die aside-ÜSB wandert nach unten; resp. U-bericht 3.9a1), 3.15a)+b)+c) */
    /* Gridcontainer und resp. Buttons/Menüs ganz unten wdh. Styles aus dem Basislayout! */
    div.grid-container { 
        display: grid; /* wiederholt Basislayout; resp. U-bericht 3.9a1) + 3.15a)+b)+c) */
        max-width: 1115px; /* wiederholt Basislayout, denn die max. Breite soll allein dem MQ überlassen sein; resp. U-bericht 3.9a1) + 3.15a)+b)+c) */
        grid-template-columns: 1fr 3.3fr; /* beide Spalten sind fluid-resp., da relative fr-Werte; s. Responsivskript 4.1.2b), resp. U-bericht 3.9a1) + 3.15b)+c) */
        grid-template-rows: auto auto auto auto auto; /* weil grid-template-areas 5 Zeilen hat; resp. U-bericht 3.9a1) + 3.15b)+c) */
        grid-template-areas: /* resp. U-bericht 3.15a)+b)+c) */
        "header header"
        "headnav headnav"
        "sidenav main"
        "   .   aside" /* für aside die Breite des Hauptcontents in der re Spalte, li Spalte ist Whitespace; resp. U-bericht 3.15a)+b)+c) */
        "   .   footer"; /* für footer die Breite des Hauptcontents in der re Spalte, li Spalte ist Whitespace; resp. U-bericht 3.15a)+b)+c) */
        background-color: #ffffff; /* wiederholt Basislayout; resp. U-bericht 3.15c) */
        margin-left: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) + 3.15c) */
        margin-right: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) + 3.15c) */
        padding: 9px; /* wiederholt Basislayout; resp. U-bericht 3.15c) */
        border: 2px solid black; /* wiederholt Basislayout; resp. U-bericht 3.15b)+ c) */
        margin-top: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG oben sichtbar; U-bericht 6. + resp. U-bericht 3.14d)+3.15c) */
        margin-bottom: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG unten sichtbar; U-bericht 6. + resp. U-bericht 3.14d)+3.15c) */
        border-radius: 6px; /* wiederholt Basislayout; resp. U-bericht 3.15c) */
    } 

    /* main, samt TOC; U-bericht 2.3 + 2.11, resp. U-bericht 3.15b)+d) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    main {
        border: none; /* farbigen 2px-Rahmen eliminiert, wegen Platz für Fließtext; U-bericht 2.11 + resp. U-Bericht 3.15d) */
        box-shadow: none; /* "Rahmenschatten" eliminiert, wegen Platz für Fließtext; U-bericht 2.11 + resp. U-Bericht 3.15d) */
        margin-right: 0px; /* 16px aus Basislayout eliminiert, wegen Platz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.15d) */
        line-height: 1.5; /* unverändert belassen, aber "explizit, damit erkennbar"; resp. U-bericht 3.7.1 + 3.7.2, 3.15d) */
    }

    /* aside; resp. U-bericht 3.1, 3.2, 3.5, 3.6, 3.15b)+e), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside {
        margin-top: 0px; /* 30px aus Basisyout eliminiert, da sonst zu großer Abstand zum main; Design-Mode-Skript 8., U-bericht 2.4, resp. U-bericht 3.15e) */
        margin-bottom: 15px; /* fürs MQ neu ergänzt, da sonst ohne vertik. Abstand zum Footer; resp. U-bericht 3.15e) */
        margin-left: 45px; /* fürs MQ neu ergänzt, um das aside etwas schmaler zu machen; resp. U-bericht 3.15e) */
        margin-right: 10px; /* fürs MQ neu ergänzt, um das aside etwas schmaler zu machen; resp. U-bericht 3.15e) */
        box-shadow: inset 0px 0px 15px 4px #dfcc23; /* hier im MQ zum Innenschatten verändert; Design-Mode-Skript 13. + resp. U-bericht 3.15e) */
        font-size: 1rem; /* 16px; auf 16px ERHÖHT, um vielen Platz besser zu nutzen! Design-Mode-Skript 7.3; resp. U-bericht 3.1, 3.2, 3.5, 3.6, 3.15e), 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.8, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1 + 3.15e) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside p, aside figcaption {
        line-height: 1.4; /* Hier im MQ unverändert belassen! Gilt vererbt auch für "Über mich"; U-bericht 2.7, resp. U-bericht 3.7.1 + 3.15e) */
    }

    /* aside figcaption; fürs MQ neu ergänzt, sieht als figcaption unter dem Buchcover besser aus als nur eine lange Textzeile; erfasst grds. zwar auch das Portrait-figcaption, wirkt sich aber gar nicht aus, da dieses zu kurz ist und ohnehin "passt"; resp. U-bericht 3.15b)+e) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside figcaption {
        padding-left: 125px;
        padding-right: 125px;
    }

    /* Die faktische Überschrift, die aber kein h2 oder h3 ist, U-bericht 1.2+2.2; resp. U-bericht 3.1, 3.2, 3.5, 3.15b)+e) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    span.ueberschrift-uebermich {
        font-size: 1.875rem; /* 30px; von 22 auf 30px ERHÖHT, um vielen Platz gut zu nutzen! resp. U-bericht 3.1, 3.2, 3.5, 3.15e) */
    }

    /* Hier im MQ soll auch dieses p zentriert sein wie die anderen aside-Elemente und nicht linksbuendig; U-bericht 2.5 + resp. U-bericht 3.15b)+e) */
    aside > p.libuendig { text-align: center; }


    /* Footer; resp. U-bericht 3.1, 3.2, 3.5, 3.15f) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    footer {
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert; Design-Mode-Skript 13. + resp. U-bericht 3.15f) */
        font-size: 0.8125rem; /* 13px; unverändert, aber explizit, damit erkennbar! Design-Mode-Skript 10.2; resp. U-bericht 3.1, 3.2, 3.5, 3.15f) */
        margin-left: 43px; /* fürs MQ neu ergänzt, um den footer so schmal wie aside zu machen; resp. U-bericht 3.15f) */
        margin-right: 9px; /* fürs MQ neu ergänzt, um den footer so schmal wie aside zu machen; resp. U-bericht 3.15f) */
    }

    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.4, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1, 3.15f) */
    footer p {
        line-height: 1.4; /* hier im MQ unverändert belassen! resp. U-bericht 3.7.1, 3.15f) */
    }

}


/* ******* 11.2: 2. MQ nach dem desktop-Layout, 671px/41.9375em - 829px/51.8125em, große Tablets; explizites MQ ******* */
/* 2 Spalten, aside wandert nach unten; Schriftgrößen verkleinert; umfließender Bildtext klappt (mit Ausnahmen); resp. U-bericht 2.4, 2.5a)-c), 3.16a)-k) */
@media screen and (min-width: 41.9375em) and (max-width: 51.8125em) {
    /* Gridcontainer; wie beim 1. MQ mit zwei Spalten, für Sidenav und Hauptcontent, die aside-ÜSB wandert nach unten; resp. U-bericht 3.9a1), 3.16a)+b) */
    /* Gridcontainer und resp. Buttons/Menüs ganz unten wdh. Styles aus dem Basislayout! */
    div.grid-container { 
        display: grid; /* wiederholt Basislayout; resp. U-bericht 3.9a1) + 3.16a)+b) */
        max-width: 1115px; /* wiederholt Basislayout, denn die max. Breite soll allein dem MQ überlassen sein; resp. U-bericht 3.9a1) + 3.16a)+b) */
        grid-template-columns: 1fr 3.3fr; /* beide Spalten sind fluid-resp., da relative fr-Werte; s. Responsivskript 4.1.2b), resp. U-bericht 3.9a1) + 3.16a)+b) */
        grid-template-rows: auto auto auto auto auto; /* weil grid-template-areas 5 Zeilen hat; resp. U-bericht 3.9a1) + 3.15a)+b) */
        grid-template-areas: /* resp. U-bericht 3.16a)+b) */
        "header header"
        "headnav headnav"
        "sidenav main"
        "   .   aside" /* für aside die Breite des Hauptcontents in der re Spalte, li Spalte ist Whitespace; resp. U-bericht 3.16a)+b) */
        "   .   footer"; /* für footer die Breite des Hauptcontents in der re Spalte, li Spalte ist Whitespace; resp. U-bericht 3.16a)+b) */
        background-color: #ffffff; /* wiederholt Basislayout; resp. U-bericht 3.16b) */
        margin-left: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) + 3.16b) */
        margin-right: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) + 3.16b) */
        padding: 9px; /* wiederholt Basislayout; resp. U-bericht 3.16b) */
        border: 2px solid black; /* wiederholt Basislayout; resp. U-bericht 3.16b) */
        margin-top: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG oben sichtbar; U-bericht 6. + resp. U-bericht 3.14d)+3.16b) */
        margin-bottom: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG unten sichtbar; U-bericht 6. + resp. U-bericht 3.14d)+3.16b) */
        border-radius: 6px; /* wiederholt Basislayout; resp. U-bericht 3.16b) */
    }

    /* body; U-bericht 2. + 7.; resp. U-bericht 3.7.3 + 3.16a)+g) + 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    body {
        font-size: 1rem; /* 16px, hier im MQ unverändert belassen; explizit, damit erkennbar; resp. U-bericht 3.6, 3.7.3 + 3.16a)+g) + 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* h1, U-bericht 4.2; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.16a)+g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h1 {
        font-size: 1.5rem; /* von 25 auf 24px verringert; U-bericht 4.2a; resp. U-bericht 3.16a)+g) */
        line-height: 1.10; /* wie im Basislayout, aber explizit, damit erkennbar; U-bericht 4.2a, resp. U-bericht 3.7.1 + 3.16a)+g) */
        padding-left: 40px; /* von 50 auf 40px verringert; U-bericht 4.2c + resp. U-bericht 3.16a)+g) */
        padding-right: 40px; /* von 50 auf 40px verringert; U-bericht 4.2c + resp. U-bericht 3.16a)+g) */
    }

    /* h2, U-bericht 4.3; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.16a)+g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h2 {
        font-size: 1.3125rem; /* von 22 auf 21px verkleinert; U-bericht 4.3a; resp. U-bericht 3.16a)+g) */
        line-height: 1.10; /* hier im MQ unverändert belassen! U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.16a)+g) */
        padding-left: 30px; /* von 40 auf 30px verringert; U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.16a)+g) */
        padding-right: 30px; /* von 40 auf 30px verringert; U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.16a)+g) */
    }

    /* h3, U-bericht 4.4; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.7.3, 3.16a)+g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h3 {
        font-size: 1.125rem; /* von 19 auf 18px verringert; U-bericht 4.4a; resp. U-bericht 3.16a)+g) */
        line-height: 1.10; /* von 1.25 auf 1.10 verringert; U-bericht 4.4a, resp. U-bericht 3.7.1 + 3.16a)+g) */
    }

    /* Weitere vertikale Abstände zu h1, h2, h3 und eingefügte before-Trenner; bisher nur h2-Abstand resp. angepasst */

    /* Eingefügter Schnörkel-Trenner, der h2-Abschnitte trennt; hier im MQ vertik. Abstand zur nächsten h2 verringert, resp. U-bericht 3.16a)+h) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h2.h2-tr2-12m:before {
        margin-bottom: 15px; /* von 36 auf 15px verringert; resp. U-bericht 3.16a)+h) */
    }

    /* headnav; resp. U-bericht 3.16a)+d) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    .headnav-haupt-ul li > a {
        font-size: 0.875rem; /* 14px, wie im Basislayout; explizit, damit erkennbar; U-bericht 2. und Design-Mode-Skript 4., resp. U-bericht 3.7.3 + 3.16a)+d) */
    }

    /* sidenav; resp. U-bericht 3.16a)+c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    .sidenav-ul li > a {
        font-size: 0.875rem; /* 14px, wie im Basislayout; explizit, damit erkennbar; U-bericht 2. und Design-Mode-Skript 4., resp. U-bericht 3.7.3 + 3.16a)+c) */
        padding-left: 10px; /* von 12 auf 10px verkleinert; U-bericht 2. und Design-Mode-Skript 4., resp. U-bericht 3.7.3 + 3.16a)+c) */
        padding-right: 10px; /* von 12 auf 10px verkleinert; U-bericht 2. und Design-Mode-Skript 4., resp. U-bericht 3.7.3 + 3.16a)+c) */
    }
    
    /* heading-item-Überschrift; U-bericht 1.+5. und Design-Mode-Skript 16.; resp. U-bericht 3.1 + 3.7.3 + 3.16a)+c)  */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    li.headingitem-ganz > a {
        font-size: 1rem; /* 16px wie im Basislayout; explizit, damit erkennbar */
    }

    /* sidenav-Schatten nur auf Startseite und nur für das 2.MQ eliminieren wg. Platz; resp. U-bericht 3.16c) */
    nav.keinschatten-2MQ {
        box-shadow: none; 
    }

    /* main, samt TOC; U-bericht 2.3 + 2.11, resp. U-bericht 3.16a)+e) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    main {
        border: none; /* farbigen 2px-Rahmen eliminiert, wegen Platz für Fließtext; U-bericht 2.11 + resp. U-Bericht 3.16a)+e) */
        box-shadow: none; /* "Rahmenschatten" eliminiert, wegen Platz für Fließtext; U-bericht 2.11 + resp. U-Bericht 3.16a)+e) */
        margin-right: 0px; /* 16px aus Basislayout eliminiert, wegen Platz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.16a)+e) */
        margin-left: 11px; /* von 16 auf 11px verkleinert, wegen Platz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.16a)+e) */
        padding-left: 0px; /* 8px aus Basislayout eliminiert, wegen Platz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.16a)+e) */
        padding-right: 0px; /* 8px aus Basislayout eliminiert, wegen Platz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.16a)+e) */
        line-height: 1.5; /* unverändert belassen, aber "explizit, damit erkennbar"; resp. U-bericht 3.7.1 + 3.7.2, 3.16g) */
    }

    /* Zu breite Einzelbilder (ab einschl. 270px) mit caption und ru-Text sollen nicht mehr floaten und außerdem zentriert sein; U-bericht Startseite 2.8e, Bilderskript 4.2d), resp. U-bericht 3.16e) */
    /* 350 bereits im Basislayout 7.2, aber "explizit, damit erkennbar" */
    figure.einzelbild-caption-ru-350resp, 
    figure.einzelbild-caption-ru-300resp,
    figure.einzelbild-caption-ru-270resp {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 7px; 
    }

    /* TOC, ol-Liste; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.16a)+f) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    ol.ol-toc {
        padding: 0px 0px 0px 70px; /* von 60px auf 70px erhöht; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3 + 3.16a)+f) */
    }

    /* TOC-Bezeichnung; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.16a)+f), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    p.wort-toc {
        font-size: 0.9375rem; /* 15px, wie im Basislayout, aber explizit...; U-bericht Contentseite 10.1; resp. U-bericht 3.16a)+f) + 3.7a.4c) wg. Schrift-Selbsthosting */
        text-indent: 51px; /* von 41 auf 51px erhöht, damit die TOC-Bez. wieder auf Höhe der h2-toc-Zahlen beginnt; resp. U-bericht 3.16f) */
    }

    /* TOC, h2-li; gegenüber Fließtext um 1px auf 16px erhöhte (!) Schriftgröße; U-bericht Contentseite 10.2b; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.16a)+f), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Wie im Basislayout, aber explizit, damit erkennbar */
    li.h2-toc { 
        font-size: 1rem; /* 16px; wg. Schrift-Selbsthosting, 3.7a.4c) */
    }

    /* TOC, h3-li; 1px kleiner als Fließtext und h2-li; U-bericht Contentseite 10.2b; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.16a)+f), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Wie im Basislayout, aber explizit, damit erkennbar */
    li.h3-toc { 
        font-size: 0.9375rem; /* 15px; 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* aside; resp. U-bericht 3.1, 3.2, 3.5, 3.16a)+i), 3.7a.4c) und Basisstyles 2.1 oben; Schriftgröße um 2px ERHÖHT */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside {
        margin-top: 0px; /* 30px aus Basisyout eliminiert, da sonst zu großer Abstand zum main; Design-Mode-Skript 8., U-bericht 2.4, resp. U-bericht 3.16i) */
        margin-bottom: 15px; /* fürs MQ neu ergänzt, da sonst ohne vertik. Abstand zum Footer; resp. U-bericht 3.16i) */
        margin-left: 25px; /* fürs MQ neu ergänzt, um das aside etwas schmaler zu machen; resp. U-bericht 3.16i) */
        font-size: 1rem; /* 16px; auf 16px ERHÖHT, um vielen Platz besser zu nutzen! Design-Mode-Skript 7.3; resp. U-bericht 3.1, 3.2, 3.5, 3.6, 3.16i), 3.7a.4c) wg. Schrift-Selbsthosting */
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert; Design-Mode-Skript 13. + resp. U-bericht 3.16i) */
    }

    /* aside figcaption; fürs MQ neu ergänzt, sieht als figcaption unter dem Buchcover so besser aus als nur eine lange Textzeile; erfasst grds. zwar auch das Portrait-figcaption, wirkt sich aber nicht relevant aus, da dieses kürzer ist und ohnehin "passt"; resp. U-bericht 3.16a)+i) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside figcaption {
        padding-left: 118px;
        padding-right: 118px;
    }

    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.8, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1 + 3.16i) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside p, aside figcaption {
        line-height: 1.4; /* Hier im MQ unverändert belassen! Gilt vererbt auch für "Über mich"; U-bericht 2.7, resp. U-bericht 3.7.1 + 3.16i) */
    }

    /* Die faktische Überschrift, die aber kein h2 oder h3 ist, U-bericht 1.2+2.2; resp. U-bericht 3.1, 3.2, 3.5, 3.16a)+i) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    span.ueberschrift-uebermich {
        font-size: 1.875rem; /* 30px; von 22 auf 30px ERHÖHT, um vielen Platz gut zu nutzen! resp. U-bericht 3.1, 3.2, 3.5, 3.16i) */
    }

    /* Hier im MQ soll auch dieses p zentriert sein wie die anderen aside-Elemente und nicht linksbuendig; U-bericht 2.5 + resp. U-bericht 3.16i) */
    aside > p.libuendig { text-align: center; }


    /* Footer; resp. U-bericht 3.1, 3.2, 3.5, 3.16a)+j) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    footer {
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert; Design-Mode-Skript 13. + resp. U-bericht 3.16j) */
        font-size: 0.8125rem; /* 13px; unverändert, aber explizit, damit erkennbar! Design-Mode-Skript 10.2; resp. U-bericht 3.1, 3.2, 3.5, 3.16j) */
        margin-left: 23px; /* fürs MQ neu ergänzt, um den footer so breit wie aside zu machen; resp. U-bericht 3.16a)+j) */
        padding-left: 15px; /* von 10 auf 15px erhöht, damit mehr seitl. Rand in einigen Auflösungsbereichen; resp. U-bericht 3.16a)+j) */
        padding-right: 15px; /* von 10 auf 15px erhöht, damit mehr seitl. Rand in einigen Auflösungsbereichen; resp. U-bericht 3.16a)+j) */
    }

    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.4, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1 + 3.16j) */
    footer p {
        line-height: 1.4; /* hier im MQ unverändert belassen! resp. U-bericht 3.7.1 + 3.16j) */
    }

}


/* ******* 11.3: 3. MQ nach dem desktop-Layout, 500px/31.25em - 670px/41.875em, kleine Tablets; explizites MQ ******* */
/* Visuell 1 Spalte, technisch 2 wg. Navs; Schriftgrößen verkleinert (nicht alle); DD-Toggle-Buttons; umfließender Bildtext klappt (mit Ausnahmen); resp. U-bericht 2.4, 2.5a)-c), 3.17a)-k) */
@media screen and (min-width: 31.25em) and (max-width: 41.875em) {
    /* Gridcontainer; hier im MQ mit zwei Spalten für die beiden Toggle-DD-Buttons/Menüs; resp. U-bericht 3.9a1), 3.13a)+b), 3.14d), 3.17b) */
    /* Gridcontainer und resp. Buttons/Menüs unten wdh. Styles aus dem Basislayout! */
    div.grid-container { 
        display: grid; /* wiederholt Basislayout; resp. U-bericht 3.9a1) und 3.17b) */
        max-width: 1115px; /* wiederholt Basislayout, denn die max. Breite soll allein dem MQ überlassen sein; resp. U-bericht 3.9a1) und 3.17b) */
        grid-template-columns: 1fr 1fr; /* beide Spalten sind fluid-resp., da relative fr-Werte; s. Responsivskript 4.1.2b), resp. U-bericht 3.9a1) und 3.17b) */
        grid-template-rows: auto auto auto auto auto; /* weil grid-template-areas 5 Zeilen hat; resp. U-bericht 3.9a1) und 3.17b) */
        grid-template-areas: /* resp. U-bericht 3.9a1) und 3.17a)+b) */
        "header header"
        "headnav sidenav"
        "main main"
        "aside aside"
        "footer footer"; /* hier im MQ ohne "Whitespace-Punkte"; resp. U-bericht 3.9a1) und 3.17a)+b) */
        background-color: #ffffff; /* wiederholt Basislayout; resp. U-bericht 3.9a1) und 3.17b) */
        margin-left: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) und 3.17b) */
        margin-right: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) und 3.17b) */
        padding: 7px 12px 7px 12px; /* von 9 auf 7/12 verändert, wg. seitl. Platz für Fließtext; U-bericht 6., resp. U-bericht 3.13a)+b) und 3.17b) */
        border: 1px solid black; /* von 2 auf 1px verringert; U-bericht 6., resp. U-bericht 3.13a)+b) und 3.17b) */
        margin-top: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG oben sichtbar; U-bericht 6., resp. U-bericht 3.14d) und 3.17b) */
        margin-bottom: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG unten sichtbar; U-bericht 6., resp. U-bericht 3.14d) und 3.17b) */
        border-radius: 6px; /* wiederholt Basislayout; resp. U-bericht 3.9a1) und 3.17b) */
    }

    /* body; U-bericht 2. + 7.; resp. U-bericht 3.7.3, 3.13b), 3.17c), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    body {
        font-size: 1rem; /* 16px, hier im MQ unverändert belassen; explizit, damit erkennbar; resp. U-bericht 3.6, 3.7.3, 3.13b), 3.17c) + 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* h1, U-bericht 4.2; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.13g) und 3.17c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h1 {
        font-size: 1.5rem; /* von 26px auf 24px verringert; U-bericht 4.2a; resp. U-bericht 3.13g) und 3.17c) */
        line-height: 1.10; /* wie im Basislayout, aber explizit, damit erkennbar; U-bericht 4.2a, resp. U-bericht 3.7.1, 3.13g) und 3.17c) */
        padding-left: 45px; /* von 50 auf 45px verringert; U-bericht 4.2c, resp. U-bericht 3.13g) und 3.17c) */
        padding-right: 45px; /* von 50 auf 45px verringert; U-bericht 4.2c, resp. U-bericht 3.13g) und 3.17c) */
    }

    /* h2, U-bericht 4.3; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.13g) und 3.17c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h2 {
        font-size: 1.25rem; /* von 22px auf 20px verringert; U-bericht 4.3a; resp. U-bericht 3.13g) und 3.17c) */
        line-height: 1.10; /* hier im MQ unverändert belassen! U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.13g) und 3.17c) */
        padding-left: 45px; /* von 40 auf 45px erhöht; U-bericht 4.3a, resp. U-bericht 3.7.1, 3.13g) und 3.17c) */
        padding-right: 45px; /* von 40 auf 45px erhöht; U-bericht 4.3a, resp. U-bericht 3.7.1, 3.13g) und 3.17c) */
    }

    /* h3, U-bericht 4.4; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.7.3, 3.13g) und 3.17c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h3 {
        font-size: 1.125rem; /* statt 19px wie im Basislayout; U-bericht 4.4a; resp. U-bericht 3.13g) und 3.17c) */
        line-height: 1.10; /* von 1.25 auf 1.10 verringert; U-bericht 4.4a, resp. U-bericht 3.7.1, 3.13g) und 3.17c) */
    }

    /* Weitere vertikale Abstände zu h1, h2, h3 und eingefügte before-Trenner; bisher nur h2-Abstand resp. angepasst */

    /* Eingefügter Schnörkel-Trenner, der h2-Abschnitte trennt; hier im MQ vertik. Abstand zur nächsten h2 verringert, resp. U-bericht 3.14c) und 3.17d) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h2.h2-tr2-12m:before {
        margin-bottom: 15px; /* von 36 auf 15px verringert; resp. U-bericht 3.14c) und 3.17d) */
    }

    /* Headergrafik/Bild selbst (img); Schatten eliminiert; U-bericht 1. und Design-Mode-Skript 12b; resp. U-bericht 3.14e) und 3.17e) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    img.headergrafik {
        box-shadow: none; 
    }

    /* main, samt TOC; U-bericht 2.3 + 2.11; resp. U-bericht 3.7.1, 3.13b) und 3.17f) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    main {
        border: none; /* farbigen 2px-Rahmen eliminiert, wg. Platz für Fließtext; U-bericht 2.11, resp. U-Bericht 3.13b) und 3.17f) */
        box-shadow: none; /* "Rahmenschatten" eliminiert, wg. Platz für Fließtext; U-bericht 2.11, resp. U-Bericht 3.13b) und 3.17f) */
        margin-left: 0px; /* 16px aus Basislayout eliminiert, wg. PLatz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.13b) und 3.17f) */
        margin-right: 0px; /* 16px aus Basislayout eliminiert, wg. PLatz für Fließtext; U-bericht 2.3 + 2.11; resp. U-bericht 3.13b) und 3.17f) */
        padding-left: 0px; /* 8px aus Basislayout eliminiert, wg. PLatz für Fließtext; U-bericht 2.3 + 2.11; resp. U-Bericht 3.13b) und 3.17f) */
        padding-right: 0px; /* 8px aus Basislayout eliminiert, wg. PLatz für Fließtext; U-bericht 2.3 + 2.11; resp. U-Bericht 3.13b) und 3.17f) */
        line-height: 1.5; /* unverändert belassen, aber "explizit, damit erkennbar"; resp. U-bericht 3.7.1 + 3.7.2 + 3.13b) und 3.17c) */
    }

    /* TOC-Bezeichnung; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f) und 3.17g), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    p.wort-toc {
        font-size: 0.9375rem; /* 15px, wie im Basislayout, aber explizit...; U-bericht Contentseite 10.1; resp. U-bericht 3.17g) + 3.7a.4c) wg. Schrift-Selbsthosting */
        text-indent: 51px; /* von 41 auf 51px erhöht, damit TOC-Bez. auf Höhe der h2-toc-Zahlen beginnt; resp. U-bericht 3.13f) und 3.17g) */
    }


    /* TOC, ol-Liste; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f)+3.17g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    ol.ol-toc {
        padding: 0px 0px 0px 70px; /* von 60px auf 70px erhöht; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3 + 3.13f)+3.17g) */
    }

    /* TOC, h2-li; gegenüber Fließtext (body-Vererbung!) um 1px auf 16px erhöhte Schriftgröße; U-bericht Contentseite 10.2b; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f) und 3.17g), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    li.h2-toc { 
        font-size: 1rem; /* 16px; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f) und 3.17g), 3.7a.4c) wg. Schrift-Selbsthosting */
    }


    /* TOC, h3-li; 1px kleiner als Fließtext und h2-li; U-bericht Contentseite 10.2b; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f) und 3.17g), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    li.h3-toc { 
        font-size: 0.9375rem; /* 15px; resp. U-bericht 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* Einzelbild mit caption und ru-Text im Hauptcontent; U-bericht Startseite 2.8e, Bilderskript 4.2d), resp. U-bericht 3.14f) und 3.17h) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    figure.einzelbild-caption-ru {
        margin-left: 0px; /* hier im MQ die 2px zur Platzgewinnung für ru-Text eliminiert; resp. U-bericht 3.14f) und 3.17h) */
    }

    /* Zu breite Einzelbilder (ab einschl. 270px) mit caption und ru-Text sollen nicht mehr floaten und außerdem zentriert sein; U-bericht Startseite 2.8e, Bilderskript 4.2d), resp. U-bericht 3.17k) */
    /* 350 bereits im Basislayout 7.2, aber "explizit, damit erkennbar" */
    figure.einzelbild-caption-ru-270resp,
    figure.einzelbild-caption-ru-300resp,
    figure.einzelbild-caption-ru-350resp {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 7px; 
    }


    /* aside; resp. U-bericht 3.1, 3.2, 3.5, 3.13c)+3.14a)+3.14b) und 3.17i); Schriftgröße um 2px ERHÖHT; 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside {
        margin-top: 0px; /* 30px aus Basisyout eliminiert, da sonst zu großer Abstand zum main; Design-Mode-Skript 8., U-bericht 2.4, resp. U-bericht 3.14b) und 3.17i) */
        margin-bottom: 15px; /* fürs MQ neu ergänzt, da sonst ohne vertik. Abstand zum Footer; resp. U-bericht 3.14b) und 3.17i) */
        font-size: 1rem; /* 16px; Design-Mode-Skript 7.3; resp. U-bericht 3.1, 3.2, 3.5, 3.6, 3.13c) und 3.17i), 3.7a.4c) wg. Schrift-Selbsthosting */
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert; Design-Mode-Skript 13., resp. U-bericht 3.14a) und 3.17i) */
    }

    /* aside figcaption; fürs MQ neu ergänzt, sieht als figcaption unter dem Buchcover so besser aus als nur eine lange Textzeile; erfasst grds. auch das Portrait-figcaption, wirkt sich aber nicht relevant aus, da dieses kürzer ist und ohnehin "passt"; resp. U-bericht 3.17i) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside figcaption {
        padding-left: 123px;
        padding-right: 123px;
    }

    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.8, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1, 3.13c) und 3.17i) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside p, aside figcaption {
        line-height: 1.4; /* hier im MQ unverändert belassen! Gilt vererbt auch für "Über mich"; U-bericht 2.7, resp. U-bericht 3.7.1, 3.13c) und 3.17i) */
    }

    /* Die faktische Überschrift, die aber kein h2 oder h3 ist, U-bericht 1.2+2.2; resp. U-bericht 3.1, 3.2, 3.5, 3.13c) und 3.17i) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    span.ueberschrift-uebermich {
        font-size: 1.875rem; /* 30px; von 22 auf 30px ERHÖHT, um vielen Platz gut zu nutzen! resp. U-bericht 3.1, 3.2, 3.5, 3.13c) und 3.17i) */
    }

    /* Hier im MQ soll auch dieses p zentriert sein wie die anderen aside-Elemente und nicht linksbuendig; U-bericht 2.5, resp. U-bericht 3.13c) und 3.17i) */
    aside > p.libuendig { text-align: center; }



    /* Footer; resp. U-bericht 3.1, 3.2, 3.5, 3.13d)+3.14a) und 3.17j) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    footer {
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert; Design-Mode-Skript 13., resp. U-bericht 3.14a) und 3.17j) */
        font-size: 0.8125rem; /* 13px; unverändert, aber explizit, damit erkennbar! Design-Mode-Skript 10.2; resp. U-bericht 3.1, 3.2, 3.5, 3.13d) und 3.17j) */
        padding-left: 15px; /* von 10 auf 15px erhöht, damit mehr seitl. Rand in einigen Auflösungsbereichen; resp. U-bericht 3.13d) und 3.17j) */
        padding-right: 15px; /* von 10 auf 15px erhöht, damit mehr seitl. Rand in einigen Auflösungsbereichen; resp. U-bericht 3.13d) und 3.17j) */
    }
    
    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.4, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1, 3.13d) und 3.17j) */
    footer p {
        line-height: 1.4; /* hier im MQ unverändert belassen! resp. U-bericht 3.7.1, 3.13d) und 3.17j) */
    }

    
     /* Die im Basislayout angelegten und gestylten, aber ausgeblendeten Buttons werden nun im Smartphone beide eingeblendet; resp. U-Bericht 3.9c) */
    button.headnav-button, button.sidenav-button {
        display: block;
    }

    /* 8 ganz neue oder veränderte Styles; 3 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9g)+h)+i) */
    nav.headnav {
        grid-area: headnav; /* wiederholt Basislayout; resp. U-Bericht 3.9g) */
        margin-top: 0px; /* wiederholt Basislayout; resp. U-Bericht 3.9g) */
        margin-bottom: 0px; /* wiederholt Basislayout; resp. U-Bericht 3.9g) */
        width: 90%; /* fit-content aus Basislayout durch 90% ersetzt, weil mit fit-content nur so breit wie der Button-Inhalt und weil damit eine flexible Breite für Buttontext und Menülinks darunter; resp. U-Bericht 3.9g) */
        height: fit-content; /* fit-content ganz neu ergänzt, damit die Höhe der Anzahl der Nav-Links entspricht und weil die Button-Höhe im default-Zustand ohne Menüeinblendung sonst etwas zu hoch ist; resp. U-Bericht 3.9g) */
        background-color:#ffffc0; /* Andere Farbe zur Abhebung von Menülinks, HG-Farbe ist immer in nav festgelegt, button braucht aber zusätzlich sein Gelb auch selbst, da nicht vererbt; resp. U-Bericht 3.9h) */
        border: none; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9h) */ 
        border-radius: 0; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9h) */
        box-shadow: none; /* für resp. Smartphone-Ansicht absichtlich eliminiert, resp. U-Bericht 3.9h), S. 38f */
        position: relative; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9i) */
        overflow: visible; /* ohne "overflow visible" wird das ul-Menü als Kind des nav nicht ausgeklappt; resp. U-Bericht 3.9i) */
    }
    
    /* 8 ganz neue oder veränderte Styles; 2 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9m)+n)+o) */
    nav.sidenav {
        grid-area: sidenav; /* wiederholt Basislayout; resp. U-Bericht 3.9m) */
        height: fit-content; /* wiederholt Basislayout; anders als headnav hat sidenav dieses Styling bereits im Basislayout; resp. U-Bericht 3.9m) */
        width: 90%; /* für eine flexible Breite von Buttontext und Menülinks darunter; resp. U-Bericht 3.9m) */
        background-color:#ffffc0; /* Andere Farbe zur Abhebung von Menülinks, HG-Farbe ist immer in nav festgelegt, button braucht aber zusätzlich sein Gelb auch selbst, da nicht vererbt; resp. U-Bericht 3.9n) */
        border: none; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9n) */
        border-radius: 0; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9n) */
        box-shadow: none; /* für resp. Smartphone-Ansicht absichtlich eliminiert; resp. U-Bericht 3.9n) */
        margin-top: 0px; /* die 30px aus dem Basislayout müssen eliminiert werden; resp. U-Bericht 3.9m) */
        position: relative; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9o) */
        overflow: visible; /* ohne "overflow visible" wird das ul-Menü als Kind des nav nicht ausgeklappt; resp. U-Bericht 3.9o) */
    }

    /* Die ul-Menüs sind im Smartphone default erst mal ausgeblendet; dieser Code muss NACH dem Styling für nav.headnav/sidenav (und vor dem Einblenden des Menüs durch JS-Klasse headnavmenue/sidenavmenue-zeigen) kommen; resp. U-Bericht 3.9d) */
    ul.headnav-haupt-ul, ul.sidenav-ul {
        display: none;
    } 

    /* Mit dieser Klasse blendet JS das default ausgeblendete HeadnavMenü im Smartphone nach User-Klick ein; weitere ul-Stylings sind hier nötig, da ul im Basislayout kaum welche hat; gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9e)+i)+j) */
    ul.headnav-haupt-ul.headnavmenue-zeigen {
        display: block; /* im Basislayout "inline-block", hier jetzt "block"-Einblendung; resp. U-Bericht 3.9e) */
        width: 100%; /* wiederholt Basislayout, aber "explizit, damit erkennbar"; Menü wird so breit wie nav/button; resp. U-Bericht 3.9j) */
        list-style-type: none; /* wiederholt Basislayout, aber "explizit, damit erkennbar"; resp. U-Bericht 3.9j) */
        position: absolute; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9i) */
        z-index: 9; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9i) */
        background-color:#fffbf1; /* das Menü behält die alte Farbe, sie muss aber eigens festgelegt werden; resp. U-Bericht 3.9j) */
        top: 100%; /* positioniert das ul-Menü vertikal nahtlos unter dem Button bzw. nav; resp. U-Bericht 3.9j) */
        left: 0; /* positioniert das ul-Menü horizontal (li beginnend) exakt unter dem Button bzw. nav, ohne Einrückung; resp. U-Bericht 3.9j) */
        border: 2px solid black; /* wegen des dicken button-border besser 2 als 1px; resp. U-Bericht 3.9j) */
        border-bottom: 1px solid black; /* i.V.m. border-bottom 1px für a ergeben sich so 2px mit passabler Rundung unten; resp. U-Bericht 3.9j) */
        border-radius: 6px; /* die gleiche Rundung wie der Button und die nav desktop; resp. U-Bericht 3.9j) */
        text-align: left; /* default, aber "explizit, damit erkennbar"; wird an li und a vererbt; resp. U-Bericht 3.9j) */
    } 

    /* Mit dieser Klasse blendet JS das default ausgeblendete SidenavMenü im Smartphone nach User-Klick ein; weitere ul-Stylings sind hier nötig, da ul im Basislayout kaum welche hat; gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9e)+p)+o) */
    ul.sidenav-ul.sidenavmenue-zeigen {
        display: block; /* resp. U-Bericht 3.9e) */
        text-align: left; /* wiederholt Basislayout und ist default, aber "explizit, damit erkennbar"; wird an li und a vererbt; resp. U-Bericht 3.9p) */
        list-style-type: none; /* wiederholt Basislayout, aber "explizit, damit erkennbar"; resp. U-Bericht 3.9p) */
        width: 100%; /* Menü wird so breit wie nav/button; resp. U-Bericht 3.9p) */
        position: absolute; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9o) */
        z-index: 9; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9o) */
        background-color:#fffbf1; /* das Menü behält die alte Farbe, sie muss aber eigens festgelegt werden; resp. U-Bericht 3.9p) */
        top: 100%; /* positioniert das ul-Menü vertikal nahtlos unter dem Button bzw. nav; resp. U-Bericht 3.9p) */
        left: 0; /* positioniert das ul-Menü horizontal (li beginnend) exakt unter dem Button bzw. nav, ohne Einrückung; resp. U-Bericht 3.9p) */
        border: 2px solid black; /* wegen des dicken button-border besser 2 als 1px; resp. U-Bericht 3.9p) */
        border-bottom: 1px solid black; /* i.V.m. border-bottom 1px für a ergeben sich so 2px mit passabler Rundung unten; resp. U-Bericht 3.9p) */
        border-radius: 6px; /* die gleiche Rundung wie der Button und die nav desktop; resp. U-Bericht 3.9p) */
    }
    /* Speziell ein im eingeblendeten SidenavMenü vorhandener "Überschriften-Item(li)" soll unsichtbar bleiben; font-size daher unnötig zu verkleinern; das Ausblenden funktionierte nur mit einem extra Styling für heading-item; resp. U-Bericht 3.9f) + 3.13e) */
    ul.sidenav-ul > li.headingitem-ganz {
        display: none;
    }
    
    /* Oben im Basislayout haben die li-Menüpunkte als einziges Styling "display inline-block", damit "nebeneinander"; im MQ braucht es zwingend display block; resp. U-Bericht 3.9l) */
    .headnav-haupt-ul li {
        display: block; /* damit alle li untereinander sind und volle Breite/Klickfläche des parent-ul haben; resp. U-bericht 3.9l) */
    }

    /* Oben im Basislayout gibt es kein Style für <li>; resp. U-Bericht 3.9r) */
    .sidenav-ul li {
        display: block; /* damit alle li untereinander sind und volle Breite/Klickfläche des parent-ul haben; resp. U-bericht 3.9r) */
    }

    /* Bei den a von headnav verkleinern 5 Stylings die Menülinks und 2 haben mit dem Rand zu tun; 8 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9k) vom Smartphone-MQ und 3.17l) */
    .headnav-haupt-ul li > a {
        display: block; /* wiederholt Basislayout: Klickfläche auf Größe des <li> vergrößern; resp. U-bericht 3.9k) */
        width: auto; /* wiederholt Basislayout: ist default, hier evtl. nötig, damit ohne overflow immer alles drin bleibt im <li>; resp. U-bericht 3.9k) */
        font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* wiederholt Basislayout; resp. U-bericht 3.9k), 3.7a.4b) */
        letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht 2.5 */
        text-decoration: none; /* wiederholt Basislayout: Linkunterstreichung entfernen; resp. U-bericht 3.9k) */
        outline: none; /* wiederholt Basislayout: ist default, aber wg. border/Schatten/runde Ecken; resp. U-bericht 3.9k) */
        white-space: normal; /* wiederholt Basislayout: ist default, aber vorsichtshalber für guten Zeilenumbruch langer anchors; resp. U-bericht 3.9k) */
        border-style: solid; /* wiederholt Basislayout: resp. U-bericht 3.9k) */
        border-color: black; /* wiederholt Basislayout: resp. U-bericht 3.9k) */
        font-size: 0.875rem; /* 14px, wiederholt Basislayout; resp. U-Bericht 3.9k)+3.17l) */
        padding-left: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9k) */
        padding-right: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9k) */
        padding-top: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9k) */
        padding-bottom: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9k) */
        border-right-width: 0px; /* hier im MQ eliminieren, da bereits Menü-ul-border vorhanden; resp. U-Bericht 3.9k) */
        border-bottom-width: 1px; /* wiederholt Basislayout, wird hier aber als vertik. Trennstriche gebraucht; resp. U-Bericht 3.9k) */
    }
    

    /* Bei den a von sidenav verkleinern 5 Stylings die Menülinks; 9 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9q) vom Smartphone-MQ und 3.17l) */
    .sidenav-ul li > a {
        display: block; /* wiederholt Basislayout: Klickfläche auf Größe des <li> vergrößern; resp. U-bericht 3.9q) */
        width: auto; /* wiederholt Basislayout: ist default, hier evtl. nötig, damit ohne overflow immer alles drin bleibt im <li>; resp. U-bericht 3.9q) */
        font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* wiederholt Basislayout; resp. U-bericht 3.9q), 3.7a.4b) */
        letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht Sidenav 7. */
        text-decoration: none; /* wiederholt Basislayout: Linkunterstreichung entfernen; resp. U-bericht 3.9q) */
        outline: none; /* wiederholt Basislayout: ist default, aber wg. border/Schatten/runde Ecken; resp. U-bericht 3.9q) */
        white-space: normal; /* wiederholt Basislayout: ist default, aber vorsichtshalber für guten Zeilenumbruch langer anchors; resp. U-bericht 3.9q) */
        border-style: solid; /* wiederholt Basislayout: resp. U-bericht 3.9q) */
        border-color: black; /* wiederholt Basislayout: resp. U-bericht 3.9q) */
        border-bottom-width: 1px; /* wiederholt Basislayout; resp. U-Bericht 3.9q) */
        font-size: 0.875rem; /* 14px, wiederholt Basislayout; resp. U-Bericht 3.9q)+3.17l) */
        padding-left: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9q) */
        padding-right: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9q) */
        padding-top: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9q) */
        padding-bottom: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9q) */
    }


    /* state hover, focus und active für die beiden toggle-DD-Buttons, die mit Klickevent und JS funktionieren; resp. U-bericht 3.11 */

    button.headnav-button:hover, button.sidenav-button:hover {
        outline: 3px solid #fca497;
        outline-offset: 1px;
    }

    button.headnav-button:focus, button.sidenav-button:focus {
        outline: 3px solid #a00565;
        outline-offset: -8px; 
    }

    button.headnav-button:active, button.sidenav-button:active {
        background-color: #c1ffc1;

    }

}


/* ******* 11.4: 4. MQ nach dem desktop-Layout, (430px) bis max. 499px/31.1875em, Smartphones; kein explizites MQ mehr! ******* */
/* Visuell 1 Spalte, technisch 2 wg. Navs; Schriftgrößen verkleinert; umfließender Bildtext fast komplett aufgehoben; resp. U-bericht 2.4, 2.5a)-c), 3.13a)-3.14g) */
@media screen and (max-width: 31.1875em) {
    /* Gridcontainer; hier im MQ mit zwei Spalten für die beiden Toggle-DD-Buttons/Menüs; resp. U-bericht 3.9a1), 3.13a)+b), 3.14d) */
    /* Alles genauso wie im 3. MQ, außer padding! */
    /* Gridcontainer und resp. Buttons/Menüs unten wdh. Styles aus dem Basislayout! */
    div.grid-container { 
        display: grid; /* wiederholt Basislayout; resp. U-bericht 3.9a1) */
        max-width: 1115px; /* wiederholt Basislayout, denn die max. Breite soll allein dem MQ überlassen sein; resp. U-bericht 3.9a1) */
        grid-template-columns: 1fr 1fr; /* beide Spalten sind fluid-resp., da relative fr-Werte; s. Responsivskript 4.1.2b), resp. U-bericht 3.9a1) */
        grid-template-rows: auto auto auto auto auto; /* weil grid-template-areas 5 Zeilen hat; resp. U-bericht 3.9a1) */
        grid-template-areas: /* resp. U-bericht 3.9a1) */
        "header header"
        "headnav sidenav"
        "main main"
        "aside aside"
        "footer footer"; /* hier im MQ ohne "Whitespace-Punkte"; resp. U-bericht 3.9a1) */
        background-color: #ffffff; /* wiederholt Basislayout; resp. U-bericht 3.9a1) */
        margin-left: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) */
        margin-right: auto; /* wiederholt Basislayout; resp. U-bericht 3.9a1) */
        padding: 5px; /* statt 7px für padding-top/bottom im 3. MQ; U-bericht 6. + resp. U-bericht 3.13a)+b) */
        border: 1px solid black; /* von 2 auf 1px verringert, im 3. MQ auch 1px; U-bericht 6. + resp. U-bericht 3.13a)+b) */
        margin-top: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG oben sichtbar; U-bericht 6. + resp. U-bericht 3.14d) */
        margin-bottom: 0px; /* 3px eliminiert, damit kein Farbverlauf-HG unten sichtbar; U-bericht 6. + resp. U-bericht 3.14d) */
        border-radius: 6px; /* wiederholt Basislayout; resp. U-bericht 3.9a1) */
    }

    /* body; U-bericht 2. + 7.; resp. U-bericht 3.7.3 + 3.13b) + 3.7a.4c, Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    body {
        font-size: 0.9375rem; /* 15px, statt 16px im 3. MQ; resp. U-bericht 3.6, 3.7.3 + 3.13b) + 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* h1, U-bericht 4.2; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.13g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h1 {
        font-size: 1.3125rem; /* von 26 auf 21px verringert, statt 24px im 3. MQ; U-bericht 4.2a; resp. U-bericht 3.13g) */
        line-height: 1.10; /* wie im Basislayout, aber explizit...; im 3. MQ auch 1.10; U-bericht 4.2a, resp. U-bericht 3.7.1 + 3.13g) */
        padding-left: 30px; /* statt 45px im 3. MQ, damit keine lange Zeile und guter ZU; U-bericht 4.2c + resp. U-bericht 3.13g) */
        padding-right: 30px; /* statt 45px im 3. MQ, damit keine lange Zeile und guter ZU; U-bericht 4.2c + resp. U-bericht 3.13g) */
    }

    /* h2, U-bericht 4.3; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.13g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h2 {
        font-size: 1.125rem; /* 18px, statt 20px im 3. MQ; U-bericht 4.3a; resp. U-bericht 3.13g) */
        line-height: 1.10; /* hier im MQ unverändert belassen, im 3. MQ auch 1.10; U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.13g) */
        padding-left: 25px; /* statt 45px im 3. MQ; U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.13g) */
        padding-right: 25px; /* statt 45px im 3. MQ; U-bericht 4.3a, resp. U-bericht 3.7.1 + 3.13g) */
    }

    /* h3, U-bericht 4.4; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.13g) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h3 {
        font-size: 1rem; /* 16px, statt 18px im 3. MQ; U-bericht 4.4a; resp. U-bericht 3.13g) */
        line-height: 1.10; /* von 1.25 auf 1.10 verringert, im 3. MQ auch 1.10; U-bericht 4.4a, resp. U-bericht 3.7.1 + 3.13g) */
    }

    /* Weitere vertikale Abstände zu h1, h2, h3 und eingefügte before-Trenner; bisher nur h2-Abstand resp. angepasst */

    /* Eingefügter Schnörkel-Trenner, der h2-Abschnitte trennt; hier im MQ vertik. Abstand zur nächsten h2 verringert, resp. U-bericht 3.14c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    h2.h2-tr2-12m:before {
        margin-bottom: 15px; /* von 36 auf 15px verringert, im 3. MQ auch 15px; resp. U-bericht 3.14c) */
    }

    /* Headergrafik/Bild selbst (img); Schatten eliminiert; U-bericht 1. und Design-Mode-Skript 12b; resp. U-bericht 3.14e) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    img.headergrafik {
    box-shadow: none; /* Schatten hier im MQ entfernt, im 3. MQ auch entfernt; resp. U-bericht 3.14c) */
    }

    /* main, samt TOC; U-bericht 2.3 + 2.11, resp. U-bericht 3.7.1 + 3.13b) */
    /* Alles genauso wie im 3. MQ! */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    main {
        border: none; /* farbigen 2px-Rahmen eliminiert, im 3. MQ auch none; U-bericht 2.11 + resp. U-Bericht 3.13b) */
        box-shadow: none; /* "Rahmenschatten" eliminiert, im 3. MQ auch none; U-bericht 2.11 + resp. U-Bericht 3.13b) */
        margin-left: 0px; /* 16px aus Basislayout eliminiert, im 3. MQ auch 0px; U-bericht 2.3 + 2.11; resp. U-bericht 3.13b) */
        margin-right: 0px; /* 16px aus Basislayout eliminiert, im 3. MQ auch 0px; U-bericht 2.3 + 2.11; resp. U-bericht 3.13b) */
        padding-left: 0px; /* 8px aus Basislayout eliminiert, im 3. MQ auch 0px; U-bericht 2.3 + 2.11; resp. U-Bericht 3.13b) */
        padding-right: 0px; /* 8px aus Basislayout eliminiert, im 3. MQ auch 0px; U-bericht 2.3 + 2.11; resp. U-Bericht 3.13b) */
        line-height: 1.5; /* unverändert belassen, aber "explizit, damit erkennbar"; im 3.MQ auch 1.5; resp. U-bericht 3.7.1 + 3.7.2 + 3.13b) und 3.17c) */
    }

    /* TOC, ol-Liste; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    ol.ol-toc {
        padding: 0px 0px 0px 50px; /* von 60 auf 50px verringert, im 3. MQ 70px; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3 + 3.13f) */
    }

    /* TOC-Bezeichnung; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    p.wort-toc {
        font-size: 0.9375rem; /* 15px, im 3. MQ auch 15px; U-bericht Contentseite 10.1; resp. U-bericht 3.13f), 3.7a.4c) wg. Schrift-Selbsthosting */
        text-indent: 32px; /* von 41 auf 32px verringert, damit TOC-Bez. auf Höhe der h2-toc-Zahlen beginnt; resp. U-bericht 3.13f) */
    }

    /* TOC, h2-li; gegenüber Fließtext um 1px auf 16px erhöhte Schriftgröße; U-bericht Contentseite 10.2b; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3 + 3.13f), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    li.h2-toc { 
        font-size: 1rem; /* 16px, im 3. MQ auch 16px; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3 + 3.13f), 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* TOC, h3-li; 1px kleiner als h2-li und genauso groß wie Fließtext; U-bericht Contentseite 10.2b; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.13f) und 3.17g), 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    li.h3-toc { 
        font-size: 0.9375rem; /* 15px; resp. U-bericht 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* Einzelbild mit caption und ru-Text im Hauptcontent; U-bericht Startseite 2.8e, Bilderskript 4.2d), resp. U-bericht 3.14f) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    figure.einzelbild-caption-ru {
        margin-left: 0px; /* hier im MQ die 2px zur Platzgewinnung für ru-Text eliminiert, im 3. MQ auch 0px; resp. U-bericht 3.14f) */
    }

    /* Alle Einzelbilder mit caption und ru-Text ab einschl. 180px haben nofloat; sie sollen nicht mehr floaten (ohne ru-Text sein) und außerdem zentriert sein; U-bericht Startseite 2.8e, Bilderskript 4.2d), resp. U-bericht 3.14g) */
    figure.nofloat {
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 7px; 
    }

    /* aside; resp. U-bericht 3.1, 3.2, 3.5, 3.13c), 3.14a)+b); wie in anderen MQ Schrift um 1px ERHÖHT; 3.7a.4c) und Basisstyles 2.1 oben */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside {
        margin-top: 0px; /* 30px aus Basisyout eliminiert, im 3. MQ auch 0px; Design-Mode-Skript 8., U-bericht 2.4, resp. U-bericht 3.14b) */
        margin-bottom: 15px; /* fürs MQ neu ergänzt, im 3. MQ auch 15px; resp. U-bericht 3.14b) */
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert, im 3. MQ auch; Design-Mode-Skript 13. + resp. U-bericht 3.14a) */
        font-size: 0.9375rem; /* von 14 auf 15px erhöht, im 3. MQ auch 15px; Design-Mode-Skript 7.3; resp. U-bericht 3.1, 3.2, 3.5, 3.13c), 3.7a.4c) wg. Schrift-Selbsthosting */
    }
    
    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.8, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1 + 3.13c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside p, aside figcaption {
        line-height: 1.4; /* hier im MQ unverändert belassen, im 3. MQ auch 1.4; gilt vererbt auch für "Über mich"; U-bericht 2.7, resp. U-bericht 3.7.1 + 3.13c) */
    }

    /* aside figcaption; fürs MQ neu ergänzt, sieht als figcaption unter dem Buchcover so besser aus als eine nur lange Textzeile; erfasst grds. zwar auch das Portrait-figcaption, wirkt sich aber gar nicht aus, da es zu kurz ist und ohnehin "passt"; resp. U-bericht 3.13c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    aside figcaption {
        padding-left: 50px; /* statt 110px im 3. MQ */
        padding-right: 50px; /* statt 110px im 3. MQ */
    }

    /* Faktische Überschrift "Über mich", die aber kein h2 oder h3 ist; hier im MQ unverändert belassen; line-height 1.4 gilt vererbt auch für "Über mich"; U-bericht 1.2+2.2; resp. U-bericht 3.1, 3.2, 3.5, 3.13c) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    span.ueberschrift-uebermich {
        font-size: 1.625rem; /* von 22 auf 26px erhöht, im 3. MQ auch 26px; resp. U-bericht 3.1, 3.2, 3.5, 3.13c) */
    }

    /* Hier im MQ soll auch dieser p zentriert sein wie die anderen ÜSB-Elemente und nicht linksbuendig; U-bericht 2.5 + resp. U-bericht 3.13c) */
    aside > p.libuendig { text-align: center; } /* im 3. MQ auch center */
    

    /* Footer; resp. U-bericht 3.1, 3.2, 3.5, 3.13d), 3.14a) */
    /* Keine Wdh. irrelevanter Styles aus dem Basislayout wie bei resp. Button/Menü-Styles unten! */
    footer {
        box-shadow: inset 0px 0px 5px 2px #dfcc23; /* hier im MQ zum Innenschatten verändert, im 3. MQ auch; Design-Mode-Skript 13. + resp. U-bericht 3.14a) */
        font-size: 0.8125rem; /* 13px; unverändert, aber explizit, damit erkennbar, im 3. MQ auch; Design-Mode-Skript 10.2; resp. U-bericht 3.1, 3.2, 3.5, 3.13d) */
    }
    
    /*  Etwas höhere line-height hilft, dass der Fokusring von Textlinks nicht so sehr umliegende Buchst. berührt; U-bericht 2.4, U-bericht Link-states 2.1a, resp. U-bericht 3.7.1 + 3.13d) */
    footer p {
        line-height: 1.4; /* hier im MQ unverändert belassen, im 3. MQ auch; resp. U-bericht 3.7.1 + 3.13d) */
        }

    
     /* Die im Basislayout angelegten und gestylten, aber ausgeblendeten Buttons werden nun im Smartphone beide eingeblendet; resp. U-Bericht 3.9c) */
    button.headnav-button, button.sidenav-button {
        display: block;
    }

    /* 8 ganz neue oder veränderte Styles; 3 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9g)+h)+i) */
    nav.headnav {
        grid-area: headnav; /* wiederholt Basislayout; resp. U-Bericht 3.9g) */
        margin-top: 0px; /* wiederholt Basislayout; resp. U-Bericht 3.9g) */
        margin-bottom: 0px; /* wiederholt Basislayout; resp. U-Bericht 3.9g) */
        width: 90%; /* fit-content aus Basislayout durch 90% ersetzt, weil mit fit-content nur so breit wie der Button-Inhalt und weil damit eine flexible Breite für Buttontext und Menülinks darunter; resp. U-Bericht 3.9g) */
        height: fit-content; /* fit-content ganz neu ergänzt, damit die Höhe der Anzahl der Nav-Links entspricht und weil die Button-Höhe im default-Zustand ohne Menüeinblendung sonst etwas zu hoch ist; resp. U-Bericht 3.9g) */
        background-color:#ffffc0; /* Andere Farbe zur Abhebung von Menülinks, HG-Farbe ist immer in nav festgelegt, button braucht aber zusätzlich sein Gelb auch selbst, da nicht vererbt; resp. U-Bericht 3.9h) */
        border: none; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9h) */ 
        border-radius: 0; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9h) */
        box-shadow: none; /* für resp. Smartphone-Ansicht absichtlich eliminiert, resp. U-Bericht 3.9h), S. 38f */
        position: relative; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9i) */
        overflow: visible; /* ohne "overflow visible" wird das ul-Menü als Kind des nav nicht ausgeklappt; resp. U-Bericht 3.9i) */
    }
    
    /* 8 ganz neue oder veränderte Styles; 2 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9m)+n)+o) */
    nav.sidenav {
        grid-area: sidenav; /* wiederholt Basislayout; resp. U-Bericht 3.9m) */
        height: fit-content; /* wiederholt Basislayout; anders als headnav hat sidenav dieses Styling bereits im Basislayout; resp. U-Bericht 3.9m) */
        width: 90%; /* für eine flexible Breite von Buttontext und Menülinks darunter; resp. U-Bericht 3.9m) */
        background-color:#ffffc0; /* Andere Farbe zur Abhebung von Menülinks, HG-Farbe ist immer in nav festgelegt, button braucht aber zusätzlich sein Gelb auch selbst, da nicht vererbt; resp. U-Bericht 3.9n) */
        border: none; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9n) */
        border-radius: 0; /* wird jetzt beim button im Basislayout festgelegt und muss hier eliminiert werden; resp. U-Bericht 3.9n) */
        box-shadow: none; /* für resp. Smartphone-Ansicht absichtlich eliminiert; resp. U-Bericht 3.9n) */
        margin-top: 0px; /* die 30px aus dem Basislayout müssen eliminiert werden; resp. U-Bericht 3.9m) */
        position: relative; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9o) */
        overflow: visible; /* ohne "overflow visible" wird das ul-Menü als Kind des nav nicht ausgeklappt; resp. U-Bericht 3.9o) */
    }

    /* Die ul-Menüs sind im Smartphone default erst mal ausgeblendet; dieser Code muss NACH dem Styling für nav.headnav/sidenav (und vor dem Einblenden des Menüs durch JS-Klasse headnavmenue/sidenavmenue-zeigen) kommen; resp. U-Bericht 3.9d) */
    ul.headnav-haupt-ul, ul.sidenav-ul {
        display: none;
    } 

    /* Mit dieser Klasse blendet JS das default ausgeblendete HeadnavMenü im Smartphone nach User-Klick ein; weitere ul-Stylings sind hier nötig, da ul im Basislayout kaum welche hat; gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9e)+i)+j) */
    ul.headnav-haupt-ul.headnavmenue-zeigen {
        display: block; /* im Basislayout "inline-block", hier jetzt "block"-Einblendung; resp. U-Bericht 3.9e) */
        width: 100%; /* wiederholt Basislayout, aber "explizit, damit erkennbar"; Menü wird so breit wie nav/button; resp. U-Bericht 3.9j) */
        list-style-type: none; /* wiederholt Basislayout, aber "explizit, damit erkennbar"; resp. U-Bericht 3.9j) */
        position: absolute; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9i) */
        z-index: 9; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9i) */
        background-color:#fffbf1; /* das Menü behält die alte Farbe, sie muss aber eigens festgelegt werden; resp. U-Bericht 3.9j) */
        top: 100%; /* positioniert das ul-Menü vertikal nahtlos unter dem Button bzw. nav; resp. U-Bericht 3.9j) */
        left: 0; /* positioniert das ul-Menü horizontal (li beginnend) exakt unter dem Button bzw. nav, ohne Einrückung; resp. U-Bericht 3.9j) */
        border: 2px solid black; /* wegen des dicken button-border besser 2 als 1px; resp. U-Bericht 3.9j) */
        border-bottom: 1px solid black; /* i.V.m. border-bottom 1px für a ergeben sich so 2px mit passabler Rundung unten; resp. U-Bericht 3.9j) */
        border-radius: 6px; /* die gleiche Rundung wie der Button und die nav desktop; resp. U-Bericht 3.9j) */
        text-align: left; /* default, aber "explizit, damit erkennbar"; wird an li und a vererbt; resp. U-Bericht 3.9j) */
    } 

    /* Mit dieser Klasse blendet JS das default ausgeblendete SidenavMenü im Smartphone nach User-Klick ein; weitere ul-Stylings sind hier nötig, da ul im Basislayout kaum welche hat; gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9e)+p)+o) */
    ul.sidenav-ul.sidenavmenue-zeigen {
        display: block; /* resp. U-Bericht 3.9e) */
        text-align: left; /* wiederholt Basislayout und ist default, aber "explizit, damit erkennbar"; wird an li und a vererbt; resp. U-Bericht 3.9p) */
        list-style-type: none; /* wiederholt Basislayout, aber "explizit, damit erkennbar"; resp. U-Bericht 3.9p) */
        width: 100%; /* Menü wird so breit wie nav/button; resp. U-Bericht 3.9p) */
        position: absolute; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9o) */
        z-index: 9; /* dient dem overlay des eingeblendeten ul-Menü; resp. U-Bericht 3.9o) */
        background-color:#fffbf1; /* das Menü behält die alte Farbe, sie muss aber eigens festgelegt werden; resp. U-Bericht 3.9p) */
        top: 100%; /* positioniert das ul-Menü vertikal nahtlos unter dem Button bzw. nav; resp. U-Bericht 3.9p) */
        left: 0; /* positioniert das ul-Menü horizontal (li beginnend) exakt unter dem Button bzw. nav, ohne Einrückung; resp. U-Bericht 3.9p) */
        border: 2px solid black; /* wegen des dicken button-border besser 2 als 1px; resp. U-Bericht 3.9p) */
        border-bottom: 1px solid black; /* i.V.m. border-bottom 1px für a ergeben sich so 2px mit passabler Rundung unten; resp. U-Bericht 3.9p) */
        border-radius: 6px; /* die gleiche Rundung wie der Button und die nav desktop; resp. U-Bericht 3.9p) */
    }
    /* Speziell ein im eingeblendeten SidenavMenü vorhandener "Überschriften-Item(li)" soll unsichtbar bleiben; font-size daher unnötig zu verkleinern; das Ausblenden funktionierte nur mit einem extra Styling für heading-item; resp. U-Bericht 3.9f) + 3.13e) */
    ul.sidenav-ul > li.headingitem-ganz {
        display: none;
    }
    
    /* Oben im Basislayout haben die li-Menüpunkte als einziges Styling "display inline-block", damit "nebeneinander"; im MQ braucht es zwingend display block; resp. U-Bericht 3.9l) */
    .headnav-haupt-ul li {
        display: block; /* damit alle li untereinander sind und volle Breite/Klickfläche des parent-ul haben; resp. U-bericht 3.9l) */
    }

    /* Oben im Basislayout gibt es kein Style für <li>; resp. U-Bericht 3.9r) */
    .sidenav-ul li {
        display: block; /* damit alle li untereinander sind und volle Breite/Klickfläche des parent-ul haben; resp. U-bericht 3.9r) */
    }

    /* Bei den a von headnav verkleinern 5 Stylings die Menülinks und 2 haben mit dem Rand zu tun; 8 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9k) */
    .headnav-haupt-ul li > a {
        display: block; /* wiederholt Basislayout: Klickfläche auf Größe des <li> vergrößern; resp. U-bericht 3.9k) */
        width: auto; /* wiederholt Basislayout: ist default, hier evtl. nötig, damit ohne overflow immer alles drin bleibt im <li>; resp. U-bericht 3.9k) */
        font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* wiederholt Basislayout; resp. U-bericht 3.9k), 3.7a.4b) */
        letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht 2.5 */
        text-decoration: none; /* wiederholt Basislayout: Linkunterstreichung entfernen; resp. U-bericht 3.9k) */
        outline: none; /* wiederholt Basislayout: ist default, aber wg. border/Schatten/runde Ecken; resp. U-bericht 3.9k) */
        white-space: normal; /* wiederholt Basislayout: ist default, aber vorsichtshalber für guten Zeilenumbruch langer anchors; resp. U-bericht 3.9k) */
        border-style: solid; /* wiederholt Basislayout: resp. U-bericht 3.9k) */
        border-color: black; /* wiederholt Basislayout: resp. U-bericht 3.9k) */
        font-size: 0.875rem; /* 14px, wiederholt Basislayout; resp. U-Bericht 3.9k) */
        padding-left: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9k) */
        padding-right: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9k) */
        padding-top: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9k) */
        padding-bottom: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9k) */
        border-right-width: 0px; /* hier im MQ eliminieren, da bereits Menü-ul-border vorhanden; resp. U-Bericht 3.9k) */
        border-bottom-width: 1px; /* wiederholt Basislayout, wird hier aber als vertik. Trennstriche gebraucht; resp. U-Bericht 3.9k) */
    }
    

    /* Bei den a von sidenav verkleinern 5 Stylings die Menülinks; 9 gegenüber Basislayout gleich gebliebene Styles werden wiederholt; resp. U-Bericht 3.9q) */
    .sidenav-ul li > a {
        display: block; /* wiederholt Basislayout: Klickfläche auf Größe des <li> vergrößern; resp. U-bericht 3.9q) */
        width: auto; /* wiederholt Basislayout: ist default, hier evtl. nötig, damit ohne overflow immer alles drin bleibt im <li>; resp. U-bericht 3.9q) */
        font-family: Inter-Tight, Arial, Helvetica, sans-serif; /* wiederholt Basislayout; resp. U-bericht 3.9q), 3.7a.4b) */
        letter-spacing: 0.015rem; /* resp. U-bericht 3.7a.4b) und U-bericht Sidenav 7. */
        text-decoration: none; /* wiederholt Basislayout: Linkunterstreichung entfernen; resp. U-bericht 3.9q) */
        outline: none; /* wiederholt Basislayout: ist default, aber wg. border/Schatten/runde Ecken; resp. U-bericht 3.9q) */
        white-space: normal; /* wiederholt Basislayout: ist default, aber vorsichtshalber für guten Zeilenumbruch langer anchors; resp. U-bericht 3.9q) */
        border-style: solid; /* wiederholt Basislayout: resp. U-bericht 3.9q) */
        border-color: black; /* wiederholt Basislayout: resp. U-bericht 3.9q) */
        border-bottom-width: 1px; /* wiederholt Basislayout; resp. U-Bericht 3.9q) */
        font-size: 0.875rem; /* 14px, wiederholt Basislayout; resp. U-Bericht 3.9q) */
        padding-left: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9q) */
        padding-right: 11px; /* statt 13px wie im Basislayout, resp. U-Bericht 3.9q) */
        padding-top: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9q) */
        padding-bottom: 8px; /* statt 14px wie im Basislayout, resp. U-Bericht 3.9q) */
    }


    /* state hover, focus und active für die beiden toggle-DD-Buttons, die mit Klickevent und JS funktionieren; resp. U-bericht 3.11 */

    button.headnav-button:hover, button.sidenav-button:hover {
        outline: 3px solid #fca497;
        outline-offset: 1px;
    }

    button.headnav-button:focus, button.sidenav-button:focus {
        outline: 3px solid #a00565;
        outline-offset: -8px; 
    }

    button.headnav-button:active, button.sidenav-button:active {
        background-color: #c1ffc1;

    }

}


/* ******* 11.5: 5. MQ nach dem desktop-Layout, (320px) bis max. 429px/26.8125em, Smartphone 2; kein explizites MQ mehr! ******* */
/* Visuell 1 Spalte, technisch 2 wg. Navs; nur wenige Schriftgrößen kleiner als im 4. MQ; umfließender Bildtext fast komplett aufgehoben, wie im 4. MQ; resp. U-bericht 2.4, 2.5a)-c), 3.18 */
@media screen and (max-width: 26.8125em) {
    /* body mit Fließtext; U-bericht 2. + 7.; resp. U-bericht 3.7.3, 3.18a)+b), 3.7a.4c) und Basisstyles 2.1 oben */
    body {
        font-size: 0.875rem; /* 14px, statt 15px im 4. MQ; resp. U-bericht 3.6, 3.7.3, 3.18a)+b), 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* h1; Änderungen gegenüber 4. MQ (s. dort); resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.7.3, 3.18a)+b) */
    h1 {
        font-size: 1.1875rem; /* 19px, statt 20px im 4. MQ; U-bericht 4.2a; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.18a)+b) */
        padding-left: 0px; /* statt 30px im 4. MQ, für gute ZU; U-bericht 4.2c + resp. U-bericht 3.18a)+b) */
        padding-right: 0px; /* statt 30px im 4. MQ, für gute ZU; U-bericht 4.2c + resp. U-bericht 3.18a)+b) */
    }

    /* h2; Änderungen gegenüber dem 4. MQ (s. dort); resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.18a)+b) */
    h2 {
        font-size: 1.125rem; /* 18px, im 4. MQ auch 18px; explizit, damit erkennbar; U-bericht 4.3a; resp. U-bericht 3.18a)+b) */
        padding-left: 5px; /* statt 25px im 4. MQ; U-bericht 4.3a, resp. U-bericht 3.7.1, 3.18a)+b) */
        padding-right: 5px; /* statt 25px im 4. MQ; U-bericht 4.3a, resp. U-bericht 3.7.1, 3.18a)+b) */
    }

    /* h3; Änderungen gegenüber 4. MQ (s. dort) und explizit...; resp. U-bericht 3.1, 3.2, 3.5, 3.7.1, 3.18a)+b) */
    h3 {
        font-size: 1rem; /* 16px, im 4. MQ auch 16px; explizit, damit erkennbar; U-bericht 4.4a; resp. U-bericht 3.18a)+b) */
    }

    /* TOC-Bezeichnung; Änderungen gegenüber 4. MQ (s. dort) und explizit...; resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.18a)+c), 3.7a.4c) und Basisstyles 2.1 oben */
    p.wort-toc {
        font-size: 0.9375rem; /* 15px, im 4. MQ auch 15px; explizit, damit erkennbar; U-bericht Contentseite 10.1; resp. U-bericht 3.18a)+c), 3.7a.4c) wg. Schrift-Selbsthosting */
        text-indent: 4px; /* statt 32px im 4. MQ; damit TOC-Bez. auf Höhe der h2-toc-Zahlen beginnt; resp. U-bericht 3.18a)+c) */
    }

    /* TOC, ol-Liste; Änderungen gegenüber 4. MQ (s. dort); U-bericht Contentseite 10.2b, resp. U-bericht 3.18a)+c) */
    ol.ol-toc { 
        padding: 0px 0px 0px 21px; /* im 4. MQ 50px, im Basislayout 60px; resp. U-bericht 3.18a)+c) */
    }

    /* TOC, h2-li; Änderungen gegenüber 4. MQ (s. dort); resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.18a)+c), 3.7a.4c) und Basisstyles 2.1 oben */
    li.h2-toc { 
        font-size: 0.9375rem; /* 15px, statt 16px im 4. MQ; resp. U-bericht 3.18a)+c) und 3.7a.4c) wg. Schrift-Selbsthosting */
    }

    /* TOC, h3-li; Änderungen gegenüber 4. MQ (s. dort) und explizit...; Schrift so groß wie h2-toc und 1px größer als Fließtext; U-bericht Contentseite 10.2b); resp. U-bericht 3.1, 3.2, 3.5, 3.7.3, 3.18a)+c), 3.7a.4c) und Basisstyles 2.1 oben */
    li.h3-toc { 
        font-size: 0.9375rem; /* 15px, im 4. MQ auch 15px; explizit, damit erkennbar; resp. U-bericht 3.7a.4c) wg. Schrift-Selbsthosting */
        margin-left: -7px; /* ohne Styling im 4. MQ und Basisstyling; bringt 7px Platz für h3-li; resp. U-bericht 3.18a)+c) */
    }

    .headnav-haupt-ul li > a,
    .sidenav-ul li > a
    {
        font-size: 0.8125rem; /* 13px, statt 14px im 4. MQ; resp. U-Bericht 3.18g) */
        padding-left: 8px; /* statt 11px im 4. MQ; resp. U-Bericht 3.18g) */
        padding-right: 8px; /* statt 11px im 4. MQ; resp. U-Bericht 3.18g) */
    }


    /* aside figcaption; Änderungen gegenüber 4. MQ (s. dort), alles andere bleibt gleich, z.B. Schriftgröße; wirkt auf BEIDE figcaptions; resp. U-bericht 3.18e) */
    aside figcaption {
        padding-left: 40px; /* statt 48px im 4. MQ */
        padding-right: 40px; /* statt 48px im 4. MQ */
    }

    /* footer; hier gibt es keinerlei Änderungen gegenüber 4. MQ (s. dort)! resp. U-bericht 3.18f) */


}


/* 12. Kontaktdaten auf Kontakt/Impressum und Datenschutzseite: address-Element statt Impressumsbild; mit span und display:none Spambots abwehren; s. U-bericht kleine Seiten/Hauptcontent 2. und 4. */
address {
    max-width: fit-content; /* Zentrierung braucht width-Angabe; ist auch responsiv */
    margin-left: auto; /* Zentrierung */
    margin-right: auto; /* Zentrierung */
    font-weight: bold;
    font-style: normal; /* wäre default kursiv */
    padding-bottom: 35px; /* um collapsing margins zu verhindern */
}

address > span {
    display: none; 
}