/* pp52 – Twenty Seventeen (WordPress.com)
 * Design → Customizer → Zusätzliches CSS. Feld leeren, alles einfügen.
 * Der @import muss die erste Zeile bleiben, sonst verwirft ihn der Browser.
 * Stand 2026-09-02, Fassung 2
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap");

/* ---------------------------------------------------------------- */
/* 1. Schrift                                                       */
/* ---------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Das Theme verlangt 300 für h1 bis h3 und 800 für Metazeilen,
   Widget-Titel, Buttons und Navigation. 300 ist jetzt im Import;
   800 hat IBM Plex Sans nicht, dafür weicht der Browser auf 700 aus. */

/* Code: das Theme setzt zwei getrennte Familien, "Courier 10 Pitch"
   für Blöcke und Monaco für Inline. Beide einzeln überschreiben. */
pre {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	background: #edf1f5;
	border-left: 3px solid #7891aa;
	padding: 1.4em 1.6em;
}

code,
kbd,
tt,
var,
samp {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
}

table {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* 2. Farben                                                        */
/* ---------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	color: #3e5265;
}

h1,
h3,
h4,
h6,
.entry-title a,
.site-title,
.site-title a,
h2.widget-title,
.page-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
	color: #3e5265;
}

h2,
.home.blog .entry-title,
h5,
.entry-meta,
.entry-meta a,
.site-description,
blockquote,
.nav-subtitle,
.comment-metadata {
	color: #5b7186;
}

/* ---------------------------------------------------------------- */
/* 3. Links                                                         */
/* ---------------------------------------------------------------- */

/* Das Theme zeichnet die Unterlänge über einen inset box-shadow in
   Schwarz, nicht über text-decoration. Nur die Farbe zu ändern ließe
   den schwarzen Strich stehen. */
.entry-content a,
.entry-summary a,
.comment-content a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a {
	color: #b85c1e;
	box-shadow: inset 0 -1px 0 rgba(184, 92, 30, 0.5);
}

.entry-content a:hover,
.entry-content a:focus,
.entry-summary a:hover,
.entry-summary a:focus,
.comment-content a:hover,
.comment-content a:focus,
.widget a:hover,
.widget a:focus {
	color: #b85c1e;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(184, 92, 30, 1);
}

/* ---------------------------------------------------------------- */
/* 4. Flächen und Linien                                            */
/* ---------------------------------------------------------------- */

/* Kopfbereich und Navigationsleiste als ein Block. Die Leiste steht im
   Theme hart auf Weiß und schnitt sonst als heller Streifen durch.
   Untermenüs bleiben weiß, damit sie sich abheben. */
.site-header,
.navigation-top,
.main-navigation > div > ul {
	background-color: #edf1f5;
}

/* Der Rahmen um das Beitragsbild bleibt weiß. Die Fläche links und
   rechts entsteht durch die 45-%-Regel unten in Abschnitt 6; auf einem
   getönten Grund stünde das Foto in einem Passepartout. */
.single-featured-image-header {
	background-color: #fff;
}

.navigation-top,
.entry-footer,
.pagination,
.comments-pagination,
.site-footer,
.single-featured-image-header,
.widget ul li,
.widget ol li,
.widget .tagcloud a,
.widget.widget_tag_cloud a,
.wp_widget_tag_cloud a,
tr {
	border-color: #d7dee6;
}

/* ---------------------------------------------------------------- */
/* 5. Fokus sichtbar halten                                         */
/* ---------------------------------------------------------------- */

/* Twenty Seventeen setzt global :focus { outline: none }. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 2px solid #b85c1e;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* 6. Bestand                                                       */
/* ---------------------------------------------------------------- */

/* Vorher schon im Feld, unverändert übernommen. */
.single-featured-image-header img {
	display: block;
	margin: auto;
	max-width: 45%;
}
/* Nachtrag */

/* Akzent nur im Inhalt, die Seitenleiste bleibt in der Grundfarbe
   und zeigt Orange erst beim Überfahren. */
.widget a,
.widget ul li a,
.widget .tagcloud a,
.widget.widget_tag_cloud a,
.site-footer .widget-area ul li a {
	color: #3e5265;
}

.widget a:hover,
.widget a:focus,
.widget ul li a:hover,
.widget ul li a:focus,
.widget .tagcloud a:hover,
.widget .tagcloud a:focus {
	color: #b85c1e;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(184, 92, 30, 1);
}

/* Navigationsleiste, zweiter Versuch mit höherer Spezifität. */
body .navigation-top,
body .main-navigation > div > ul {
	background-color: #edf1f5;
}