*/ * { /* unversal-selector */
	margin: 0;	
	padding: 0;
	border: 0;
}  

body { /* doc-body-element */
	font-family: Bahnschrift, "Lucida Grande", Calibri, Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 14px;
	margin: 0 auto;
	max-width: 480px;
	background-color: whitesmoke;
	z-index: 0;
	opacity: 0.8;
	background-color: whitesmoke
}
body > * {
	box-shadow: 0 0 5px #888;
}
body > footer, body > nav, body > header {
	box-shadow: none
}

body > footer {
	padding: 20px;
}

body > header {
    /* Basis-Eigenschaften */
    background-repeat: no-repeat;
    background-color: whitesmoke;
    max-width: 480px;
    
    /* Initiale Werte für nicht-scrolled State */
    position: initial;
    height: 128px;
    opacity: 1.0;
    background-position: bottom right;
    background-size: 128px 128px;
    top: 0;
    
    /* Alle animierbaren Eigenschaften in transition einschließen */
    -webkit-transition: 
        height 0.3s ease,
        background-color 0.3s ease,
        background-position 0.3s ease,
        background-size 0.3s ease,
        opacity 0.3s ease,
        top 0.3s ease;
    transition: 
        height 0.3s ease,
        background-color 0.3s ease,
        background-position 0.3s ease,
        background-size 0.3s ease,
        opacity 0.3s ease,
        top 0.3s ease;
}

body > header.scrolled {
    /* Geänderte Eigenschaften für scrolled State */
    position: fixed;
    height: 128px;
    opacity: 0.6;
    background-position: center bottom;
    background-size: 128px auto; /* Kleinere Grafik für kompakten Header */
    border-bottom: solid 2px rgba(255,255,255,0.9);
    width: 100%;
    z-index: 1000; /* Sicherstellen dass Header über Content liegt */
}
/* Debug CSS - Temporär hinzufügen */
body > header {
    /* Ihre bestehenden Regeln... */
    
    /* Debug: Langsame Übergänge für bessere Sichtbarkeit */
    transition-duration: 2s !important;
    
    /* Debug: Sichtbare Ränder */
    border: 3px solid red !important;
}

body > header.scrolled {
    /* Ihre bestehenden Regeln... */
    
    /* Debug: Andere Farbe für scrolled State */
    border: 3px solid blue !important;
    background-color: lightblue !important;
}

/* Debug: JavaScript-Status anzeigen */
body::after {
    content: "JS nicht aktiv";
    position: fixed;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 5px;
    z-index: 9999;
}

body.js-active::after {
    content: "JS aktiv";
    background: green;
}
body.loading::after {
	content: "loading";
	background: darkorange;
	top: 25px;
}
body #page {
	position: fixed;
	bottom: 10px;
	left: 10px;
	background: blue;
	color: white;
}
body #articles {
	position: fixed;
	top: 10px;
	left: 10px;
	background: black;
	color: white;
}

body > header.scrolled.supplemental {
	display: none;
}
body > header > nav {
    background-color: rgba(254, 64, 64, 0.2);
    padding-left: 20px;
}
body > header.scrolled:hover {
	opacity: 1;
}

body > header + section { /* infobar, bspw. EU-Cookies */
	display: none;
	background: rgba(0,128,0,1);
	color: rgba(0,0,0,1);
	margin: 1.2em auto;
	padding: 1.2em;
	box-shadow: 0px 0px 5px #888;
	font-size: 13px;
	cursor: default;
}
body footer + section { /* Eigenwerbung */
	color: rgba(0,0,0,0.4);
	margin: 1.2em auto 0;
	padding: 1.2em;
	box-shadow: 0px 0px 5px #888;
	font-size: 13px;
	cursor: default;
	border: solid 1px #fff;
	text-align: center;
	display: none;
}
body footer + section a {
	border-bottom: solid 2px rgba(238, 112, 0, 0.4);
}
body footer + section a:hover {
	color: rgba(0,0,0,0.8);
	border-bottom: solid 2px rgba(238, 112, 0, 0.8);
}
body footer + section select {
	width: 100%	
}

body > details {
	color: whitesmoke;
	cursor: help;
	padding: 20px;
	margin: 0 0 20px 0;
}
body > details > summary {
	margin: 0 0 20px 0;
	text-decoration: underline dotted;
	font-weight: bold;
}

/* elements */
a {
	color: inherit;
	text-decoration: none;
}

header select {
	background-color: transparent;
	border-bottom: solid 1px #000;
	width: 180px;
	line-height: 1.5em;
	font-family: Georgia, "Times New Roman", serif;
}
header select option {
	height: 2em;
}

article {
	background-color: white;
}
article + article {
	margin-top: 1em;
}

article h1 > label {
	padding: 0 0 1em 1em;
	float: right;
	opacity: 0.2;
	cursor:help;
	text-align: right;
}
article a  {
	text-decoration: dashed;
	border-bottom: dotted 1px darkred;
}
article p a:before {
	content:"\2197";
}
article p a[href^="http://udo.springfeld.eu/blog/"]:before,
article p a[href^="/blog/"]:before,
article p a[href^="#"]:before {
	content:"";
}
article p a[href^="http://amzn.to/"]:after,
article p a[href^="https://www.amazon.de/"]:after {
	content: " (€)";
}

article > footer {
    font-size: 2em;
    line-height: 1.2em;
    font-weight: bold;
    text-align:  right
}

body > footer {
    text-align: right
}

/* Teilen; https://gist.github.com/mbostock/3094619 */
svg.sharing.feed {
	display: block;
	height: 75px;
	margin: 46px 64px;
	position: fixed;
	bottom: 0;
	right: 0;
	box-shadow: none;
}
svg.sharing.twitter {
    display: block;
    height: 75px;
    margin: 50px 50px;
    position: fixed;
    bottom: 125px;
    right: 0;
    box-shadow: none;
}
/* Markierung; einzige erlaubte Eigenschaften: background-/color, text-shadow */
::-moz-selection, ::selection {
	color: rgba(255,255,255,1); /* rgba(245,245,245.0.8); */ /* whitesmoke, #f5f5f5 */
	text-shadow: 
		1px  1px 1px rgba(0,0,0,0.8),
        1px -1px 1px rgba(0,0,0,0.8),
        -1px  1px 1px rgba(0,0,0,0.8),
        -1px -1px 1px rgba(0,0,0,0.8);
}

ul, ol, p {
    line-height: 1.8em;
}
ul, ol {
	margin-bottom: 1.8em;
}
ol ul, ul ol { /* in Listen eingebettete Listen */
	margin-bottom: 0;
}
ul {
    list-style: none;
}
article > ul:not(.meta) {
	list-style: square; 
	margin-left: 20px;
}
nav#pagination ul {
	padding-left: 0;
}

ul, ol {
	margin-left: 1.8em;
}
ul.meta li a {
	padding: 2px;
	border: rgba(0,0,0,0.8);
	border-radius: 2px;
}
ul.meta li a:hover {
	background: #000;
	color: #fff;
	padding: 2px;
	border-radius: 2px;
}

ul.breadcrumbs { /* <!--nextpage--> /// Binnennavigation in einem Post/einer Page */
	padding-left: 0;
	text-align: center;
}

nav#pagination { /* previous/next_posts_link */
    cursor: pointer;
    margin: 0 auto;
}

nav#pagination ul li {
    font-size: 2em;
    display: inline-block;
    width: 50%;
    text-align:  center;
}
nav#pagination ul li:empty {
	min-height: 1px; /* applies width: 50% */
}
nav#pagination ul li strong {
    font-size: 1.2em
}

nav#pagination-2 {
	font-size: 1.5em;
	display: flex;
	flex-direction: row; /* (default, others: column, and both postfixed by -reverse) */
	padding: 20px 0;
}

nav#pagination-2 a {
	flex: 1;
	text-align: center;
}


figure.wp-block-pullquote {
	font-size: 14px;
	color: rgba(255,255,255,1.0);
	padding: 0;
	text-align: left;
}
figure.wp-block-pullquote blockquote cite {
	display: block;
	text-align: right;
}
blockquote {
	background: #000;
	color: #fff;
	padding: 1.2em;
	font-style: italic;
}
blockquote p {
	padding-bottom: 1.2em;
}
blockquote footer, blockquote cite {
	text-align: right
}
blockquote footer:before, blockquote cite:before {
	content: '—';
}
blockquote a {
	text-decoration: underline;
}

article > figure {
	padding: 0;
}

article > figure > figcaption {
	padding: 0 20px;
}

/* Web Speech API/SpeechSynthesis */
button {
	display: none;
	border: solid 3px #000;
}
button.play:before {
	content: '▶';
}

/* Hamburger-Icon Anker */
.hamburger {
	font-size: 52px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: normal;
	line-height: 128px;
	margin-bottom: 52px;
}

/* Page in-persona/Zitate http://udo.springfeld.eu/blog/in-persona/zitate/ */
#wp-quotes-list li q {
    color: rgba(255,255,255,0.8);
    border-radius: 12px;
    border-bottom-left-radius: 0;
    padding: 20px;
    display: inline-block;
    background-color: rgba(0,0,0,0.8);
}
#wp-quotes-list li cite {
    display: block;
	padding: 0 0 20px 20px;
}

#wp-quotes-list {
	list-style: none;
	margin-left: 0;
}

footer#ads img {
	width: 100%;
}

del {
	text-decoration: line-through;
}
ins {
	background: rgba(129, 215, 66, 0.5);
	border-radius: 0.3em;
	text-decoration: none;
}
.update {
	border: dashed 1.5px rgba(129, 215, 66, 0.8);
}
.update::before {
	font-style: normal;
	content: 'Hinzufügung'; /* ""? */
	background: rgba(129, 215, 66, 0.8);
	color: #111;
	padding: 0.15em 0.25em;
	position: relative;
	top: 0.2em;
	left: -2.25em;
	transform: rotate(-5deg);
}
/* del? */
span.mathmlalike, sub.mathmlalike { /** category:definitionen bspw., als mathml lookalike */
	font-family: Georgia
}
span.mathmlalike {
	font-size: 1.2em;
	vertical-align: center;
}
/** post->status pending for example */
article p.warning {
	background: rgba(129, 215, 66, 0.5);
	border-radius: 0.3em;
	text-decoration: none;
	border: dashed 1.5px rgba(129, 215, 66, 0.8);
}
article p.warning::before {
	font-style: normal;
	content: 'Review'; /* ""? */
	background: rgba(256, 215, 66, 0.8);
	color: #111;
	padding: 0.15em 0.25em;
	position: relative;
	top: 0.2em;
	left: -2.25em;
	transform: rotate(-5deg);
}
/** per cat/tag classes */
article.tag-SPD > ul:not(.meta) {
	list-style-type: square;
}
article.tag-SPD > p:last-of-type:after { /** transparenz */
	color: #e52724;
	content: ' ■ Autor ist Sozi';
	white-space: nowrap;
}

/* <nav /> */
#navigation:target {
	background: rgba(0,0,0,1);
	left: 0;
	transition: left 2s, background 2s;
	overflow-y: scroll;
}
#navigation {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: -100%;
	z-index: 1;
	background: rgba(0,0,0,0);
	font-size: 24px;
	color: rgba(255,255,255,1);
	transition: left ease-out 1s, opacity ease-out 1s;
}
#navigation h1 {
	margin: 0 1.8em;
	color: rgba(0,0,0,1.0);
}
#navigation h1 img {
	filter: invert(100%);
}

header, article, footer {
	z-index: 1;
}
article {
	will-change: transform;
	transform: translateZ(0); /* Erzwingt Hardware-Beschleunigung */
}
article > * {
	padding: 20px;
}
article > * + p {
	padding-top: 0;
}
article > blockquote + p {
	padding-top: 20px;
}
/* Beitragsbild */
article > aside:first-child {
	margin: 0;
	padding: 0;
}
article > aside:first-child img {
	width: 100%;
}


header h1 {
	font-size:52px;
}

ul.icon-list { /* bookmark list */
	line-height: 20px;
}
ul.icon-list li {
	margin-bottom: 4px;
}
ul.icon-list li:last-child {
	margin-bottom: initial;
}
ul.icon-list li a {
	text-decoration: none;
	border-bottom: none;
}
ul.icon-list li a span {
	border-bottom: solid 1px rgba(0,0,0,0.4);
}
ul.icon-list li a span:hover {
	border-bottom: solid 1px rgba(0,0,0,1.0);
}
ul.icon-list li img {
	vertical-align: bottom;
	width: 16px;
	margin-right: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
}
header span.bookmark { /* bookmark link */
	overflow: hidden;
	display: inline-block;
	position: relative;
	border: solid 3px #000;
	border-bottom: none;
	width: 1em;
	width: 20px;
	height: 1.5em;
	height: 30px;
	letter-spacing: 1em;
    }
    span.bookmark a::before {
      position: absolute;  
      display: block;
      content: '';

	width: 1em;
      width: 20px;
	height: 1em;
      height: 20px;

      background-color: transparent;
      border: solid 3px #000;
      overflow: hidden;
      
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);

      top: 0.5em;
    }

    span.bookmark a::before {
      top: 1.1em;
      left: -0.1em;

	  top: 22px;
	  left: -3px;
    }

/* EU-Cookies ohne 3rd party stuff, Ad Blocker Blocker Blocker */
#cookie-choice, #adblocker-blocker {
	color: white;
	vertical-align: middle;
	padding-left: 32px;
	background-color: rgba(128,0,0,1);
	margin: 1.2em auto 0;
	padding: 1.2em;
	box-shadow: 0px 0px 5px #888;
	font-size: 13px;
	cursor: default;
	border: solid 1px #fff;
}
#cookie-choice h1, #cookie-choice p {
	padding: 0 20px 0 40px;
}
#cookie-choice input {
	vertical-align: bottom;
	top: 18px;
    position: relative;
    left: 10px;
}
#adblocker-blocker {
	display: none;
}

/* progress'o'meter / Lesefortschritt */

#ypp {
	position: fixed;
	bottom: calc(50vh - 100px);
	left: calc(50vw - 4em);
	transform: rotate(90deg);
	width: 100px;
	background: rgba(0,0,0,1);
	color: rgba(255,255,255,1);
	opacity: 0;
	transition: opacity 0.3s;
}
#ypp:hover {
	opacity: 1.0 !important;
}

#search {
	width: 100%;
}
#search input[type=text] {
	width: calc(100% - 2em);
	padding: 1em;
}

/* .blink, <blink /> successor ;) /// http://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations, nur für http://udo.springfeld.eu/blog/2016/04/14/bash-auf-linux-auf-windows-wie-und-warum/ */
blink {
	animation: blink 1s steps(5, start) infinite;
	-webkit-animation: blink 1s steps(5, start) infinite;
	-moz-animation: blink 1s steps(5, start) infinite; 
} 
@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}
/* / */

/* https://codex.wordpress.org/Content_Width */
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}
iframe {
	max-width: 100% !important;
	min-height: auto !important;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #999;
	}
	
	body > header {
		background-color: #999;
	}
	
	body > * {
    	box-shadow: 0 0 18px #333;
	}
}

/* Feature Image = Blured Background Image */ 

.custom-background {
    background-attachment: fixed;
    background-repeat: no-repeat;
}

#content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8); /* Heller Hintergrund für Textlesbarkeit */
    padding: 20px;
    border-radius: 8px;
}