/* =========================================================
   THEME.CSS – bereinigte Webseiten-Fassung
   Zweck: Gestaltung reiner HTML-Inhaltsseiten
   Entfernt: Typora-Editor, Sidebar, Menüs, Exportdialoge
   Behalten: Schrift, Seitenlayout, Text, Listen, Tabellen,
             Code, Bilder, Banner und Breadcrumb
   ========================================================= */


/* =========================================================
   Einbindung von Google Webfonts
   ---------------------------------------------------------
   Es ist nötig, dazu in css "fontawesome-all.min.css"
   und den Font-Ordner "webfonts" in der gleichen Ebene  zu platzieren
   ========================================================= */
   
@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@300;400;600&display=swap");

@include-when-export url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);


/* =========================================================
   1. Schriften
   ---------------------------------------------------------
   PT Serif ist die Hauptschrift der Inhaltsseiten.
   Die lokalen Dateien müssen im Ordner ./newsprint/ liegen.
   ========================================================= */

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: normal;
  src: local('PT Serif'), local('PTSerif-Regular'), url('./newsprint/pt-serif-v11-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: normal;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url('./newsprint/pt-serif-v11-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: bold;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url('./newsprint/pt-serif-v11-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: bold;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url('./newsprint/pt-serif-v11-latin-700italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   2. Grundlayout der Seite
   ---------------------------------------------------------
   Betrifft die komplette Inhaltsseite: Grundschrift,
   Hintergrund, Textfarbe und Zeilenhöhe.
   ========================================================= */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #1f0909;
  font-family: "PT Serif", 'Times New Roman', 'SF Pro', Times, serif;
  line-height: 1.5em;
}


/* =========================================================
   3. Inhaltsbereich
   ---------------------------------------------------------
   #write ist der Hauptcontainer der Inhaltsseite.
   Padding bestimmt den Innenabstand.
   Max-width bestimmt die maximale Inhaltsbreite.
   ========================================================= */

#write {
  max-width: 2500px;
  margin: 0 auto;
  padding: 36px 24px 50px 24px;
}

@media only screen and (min-width: 2500px) {
  #write {
    max-width: 914px;
  }
}


/* =========================================================
   4. Überschriften
   ---------------------------------------------------------
   Regelt Größe, Gewichtung, Abstand und die Trennlinie
   unter der Hauptüberschrift.
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-bottom: 1.5em;
}

h1 {
  font-size: 1.875em;
  line-height: 1.3em;
  font-weight: normal;
  margin-top: 2em;
  margin-bottom: 0.5em;
  padding-bottom: 0.8125em;
  border-bottom: 1px solid #c5c5c5;
}

h2,
h3 {
  font-size: 1.3125em;
  line-height: 1.15;
  margin-top: 2.285714em;
  margin-bottom: 0.75em;
}

h3 {
  font-weight: normal;
}

h4 {
  font-size: 1.125em;
  margin-top: 2.67em;
}

h5,
h6 {
  font-size: 1em;
}


/* =========================================================
   5. Links
   ---------------------------------------------------------
   Normale Links sind blau und nicht unterstrichen.
   Beim Überfahren mit der Maus werden sie unterstrichen.
   ========================================================= */

a {
  color: #065588;
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}


/* =========================================================
   6. Absätze, Zitate und Trennlinien
   ---------------------------------------------------------
   Grundabstände für Textblöcke, Blockzitate und <hr>.
   ========================================================= */

p,
blockquote {
  margin-bottom: 1.5em;
}

blockquote {
  font-style: italic;
  color: #656565;
  border-left: 5px solid #bababa;
  margin-left: 2em;
  padding-left: 1em;
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

blockquote ul,
blockquote ol {
  margin-left: 0;
}

hr {
  border: none;
  border-bottom: 1px solid #c5c5c5;
}


/* =========================================================
   7. Listen
   ---------------------------------------------------------
   Normale Aufzählungen und nummerierte Listen.
   Verschachtelte nummerierte Listen werden alphabetisch
   bzw. römisch dargestellt.
   ========================================================= */

ul,
ol {
  margin: 0 0 1.5em 1.5em;
  list-style: none;
}

ul li {
  list-style-type: disc;
  list-style-position: outside;
}

ol li {
  list-style-type: decimal;
  list-style-position: outside;
}

p + ul,
p + ol,
h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol {
  margin-top: .5em;
}

li > ul,
li > ol {
  margin-top: inherit;
  margin-bottom: 0;
}

li ol > li {
  list-style-type: lower-alpha;
}

li li ol > li {
  list-style-type: lower-roman;
}


/* =========================================================
   8. Bilder
   ---------------------------------------------------------
   Bilder skalieren proportional auf die verfügbare Breite.
   Dadurch bleiben sie responsive und sprengen keine Spalte.
   ========================================================= */

img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   9. Tabellen
   ---------------------------------------------------------
   Einfache HTML-Tabellen:
   - volle Breite
   - schwarze Linien
   - nur Kopfzellen <th> grau
   - keine Zebra-Streifen
   - <tfoot> als kleine kursive Legende
   ========================================================= */

table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid #000;
  font-size: 1em;
}

th,
td {
  border: 1px solid #000;
  padding: 6px 8px;
  vertical-align: top;
}

th {
  background-color: #d9d9d9;
  font-weight: bold;
  text-align: left;
}

tfoot td {
  font-size: 0.8rem;
  font-style: italic;
  color: #777;
  line-height: 1.4;
  padding: 8px;
  background: #f2f2f2;
}


/* =========================================================
   10. Code und vorformatierter Text
   ---------------------------------------------------------
   Betrifft Inline-Code <code>, <pre> und <tt>.
   ========================================================= */

code {
  background-color: #dadada;
  padding-left: 2px;
  padding-right: 2px;
}

pre {
  background-color: #dadada;
  padding: 1em;
  overflow-x: auto;
}

pre,
code,
tt {
  font-size: .875em;
  line-height: 1.714285em;
}


/* =========================================================
   11. Formulareingaben
   ---------------------------------------------------------
   Kleine neutrale Grundregel, falls Eingabefelder in einer
   Seite vorkommen.
   ========================================================= */

input {
  border: 1px solid #aaa;
}


/* =========================================================
   12. Bannerbild oben
   ---------------------------------------------------------
   .top-banner zieht das Banner über die volle Browserbreite.
   Das Bild bleibt proportional und verursacht keine Lücke,
   solange html/body margin und padding 0 haben.
   ========================================================= */

.top-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: 0;
  background: #000;
}

.top-banner img {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   13. Breadcrumb-Navigation
   ---------------------------------------------------------
   Kleine Pfadnavigation oberhalb des Seiteninhalts.
   ========================================================= */

.breadcrumb {
  margin-bottom: 30px;
  font-size: 0.95rem;
  color: #777;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}