@charset "UTF-8";
 
@font-face {
	font-family:"Crimson"; src:url("https://steffen-geyer.de/lyrik/bl-themes/html5/css/crimson_text/CrimsonText-Regular.ttf") format("truetype"); }
@font-face {
	font-family:"Inter"; src:url("https://steffen-geyer.de/lyrik/bl-themes/html5/css/inter/Inter-VariableFont.ttf") format("truetype"); }
@font-face {
	font-family:"Bahnschrift"; src:url("https://steffen-geyer.de/lyrik/bl-themes/html5/css/bahnschrift/bahnschrift.ttf") format("truetype"); }

:root {
	--font-sans-serif:Bahnschrift, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-serif:Crimson, Georgia, "Times New Roman", Times, "Liberation Serif", "Noto Serif", serif;
	--font-monospace:"Inter", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--bg:#fef6e9;
	--gekritzeltes:rgb(15 51 65 / 20%);
	--gedichtetes:rgb(207 76 46 / 20%);
	--gesungenes:rgb(55 136 146 / 20%);
	--static:rgb(233 168 35 / 20%);
	--trans:all 1s ease;
	--3dschatten:inset 0 0.0125em 0 rgba(255,255,255,1), inset 0 0.0625em 0 rgba(255,255,255,0.7), 0.05em 0.05em 0.05em rgba(0, 0, 0, 0.4), 0.1em 0.1em 4px rgba(0, 0, 0, 0.3), 0.2em 0.2em 8px rgba(0, 0, 0, 0.2);
	--2dschatten:0em 0.05em 0 rgba(51, 51, 51, 0.4), 0em 0.1em 0em rgba(85, 85, 85, 0.3), 0em 0.2em 0em rgba(119, 119, 119, 0.2), 0em 0.4em 0em rgba(119, 119, 119, 0.1);

}

@media (prefers-reduced-motion:no-preference) {
	:root { scroll-behavior:smooth; }
}

/*Standards*/

html { color:#000; background:var(--bg); font-family:var(--font-sans-serif); font-display: swap; }

body { width:96%; max-width:90em; margin:0 auto; padding:0 0.5em 0.5em; font-size:100.1%; font-weight:400; border-radius:0.4em; line-height:1.5; }

fieldset { margin:0; padding:0; border:none; }
legend { display:none; }

label { font-weight:700; margin:0 0 0.3em 0; }
input, select { margin:0 .5em 0.3em 0; }

ul, li { margin:.5em; padding:0; }

dt { font-weight:700; }
dd { margin:0; padding:0 0 .8em 1em; }

hr { height:.1em; margin:0.4em 0 .8em 0; padding:0; border:thin solid #000; }

p { margin:0; padding:0 0 1em 0; hyphens:auto; hyphenate-limit-chars:auto 3; hyphenate-limit-lines:2; hyphenate-limit-last: none; }

blockquote { margin:.4em -0.9em 1em 1.2em; padding:.6em .8em 0 .6em; color:#000; }
blockquote span { margin-left:40%; display:block; text-align:right; }

h1, h2, h3, h4, h5 { margin:0.2em 0 0.2em 0; padding:0; font-weight:700; }
h1 { font-size:2rem; font-family:var(--font-serif); font-display: swap; line-height:1.1em; }
h2 { font-size:1.3em; }
h3 { font-size:1.2em; }
h4 { font-size:1.1em; }
h5 { font-size:1.0em; }

a, a:link, a:visited { color:#000; background:none; text-decoration:underline; font-weight:700; border-radius:0.3em; }
a:visited { font-weight:inherit; }
a:focus, a:hover, a:active, h2 a:focus, h2 a:hover, h2 a:active { text-decoration:none; color:#fff; background:#000; }

img { margin:0; padding:0; border:none; }

table, tr, th, td { margin:0; padding:0; }
th { font-size:1.1em; }
th, td { text-align:left; margin:0; padding:0 0em 0.2em 0; vertical-align:top; }


/* Anpassungen Big Screen */

nav[aria-label="Hauptnavigation"] { margin:0; display:grid; grid-template-columns:auto 1fr; gap:0.5rem; font-family:var(--font-sans-serif); font-display: swap; height:4rem; box-shadow:var(--2dschatten); position: sticky; top: 0; z-index: 1000; background-color:var(--bg); }
nav[aria-label="Hauptnavigation"] > a { font-size:1.3em; padding:0.2em 0.6em 0.2em 0.2em; margin:0.15em 0 0 0; }
nav[aria-label="Hauptnavigation"] > a img { padding:0 0.2em 0 0.3em; vertical-align:middle; }

nav[aria-label="Hauptnavigation"] ul { list-style:none; margin:0.5em 0 0 0; padding:0; }
nav[aria-label="Hauptnavigation"] li { float:left; margin:0.4em 0 0 0.6em; padding:0; min-width:4em; }
nav[aria-label="Hauptnavigation"] li:last-child { float:right; }
nav[aria-label="Hauptnavigation"] li:nth-child(4) a { background:var(--static); }
nav[aria-label="Hauptnavigation"] a { display:block; transition:var(--trans); }
nav[aria-label="Hauptnavigation"] a:hover { filter:invert(100%); }
nav[aria-label="Hauptnavigation"] li a { padding:0.4em 0.4em; margin:0; border-radius:0.2em 1em 0em 0.5em; }

nav[aria-label="Hauptnavigation"] div { margin:0.4em 0 0 0; }
nav[aria-label="Hauptnavigation"] input { width:7em; margin:0; padding:0 0 0.2em 0; }

main { display:grid; grid-template-columns:repeat(3, calc(33% - 0.5em)); grid-template-rows:auto auto auto 1fr; gap:0.5em 1.25em; }
.breadcrumb { grid-column:span 3; }
article { grid-column:span 3 / span 3; grid-row:span 2 / span 2; grid-row-start:2; }
article#Gekritzeltes, article#Gedichtetes, article#Gesungenes, article#static { grid-column:span 2 / span 2; grid-row:span 3 / span 3; grid-row-start:2; }
figure { grid-column-start:3; grid-row-start:2; }
main > aside { grid-column-start:3; grid-row-start:3; }
nav[aria-label="Weitere Gedichte"] { grid-column-start:3; grid-row-start:4; }
nav[aria-label="Pagination"] { grid-column:span 3 / span 3; grid-row-start:4; }

main { clear:both; margin:0; padding:1em 0.6em 0.8em 0.5em; box-shadow:var(--2dschatten); }

.breadcrumb { font-size:0.85em; list-style:none; display:flex; flex-wrap:nowrap; padding:0; margin:0 0 0.5em 0; overflow:hidden; }
.breadcrumb li { display:flex; align-items:center; margin:0; padding:0; white-space:nowrap; min-width:0; }
.breadcrumb li:not(:first-child)::before { content:" >> "; margin:0 0.2em; flex-shrink:0; }
.breadcrumb li:first-child::before { content:"Du bist hier :"; margin:0 0.5em 0 0; flex-shrink:0; }
.breadcrumb a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

header { text-align:center; }
header p { font-family:var(--font-serif), Crimson; font-size:1.4em; margin:0; font-display: swap; }

article .Gekritzeltes, nav[aria-label="Hauptnavigation"] .Gekritzeltes a { background:var(--gekritzeltes); }
article .Gedichtetes, nav[aria-label="Hauptnavigation"] .Gedichtetes a { background:var(--gedichtetes); }
article .Gesungenes, nav[aria-label="Hauptnavigation"] .Gesungenes a { background:var(--gesungenes); }

article#Gekritzeltes, article#Gedichtetes, article#Gesungenes, article#static { font-family:var(--font-serif), Crimson; font-display: swap; font-size:1.2em; margin:0 0 0.8em 0; padding:0.3em 1.6em 0.6em 1.6em; border-radius:0.4em; box-shadow:var(--3dschatten); }
article#Gekritzeltes { background:var(--gekritzeltes); }
article#Gedichtetes { background:var(--gedichtetes); }
article#Gesungenes { background:var(--gesungenes); }
article#static { background:var(--static); }

article#Gekritzeltes header, article#Gedichtetes header, article#Gesungenes header, article#static header { text-align:left; padding:0.4em 0 0 0; }

article ul:nth-child(2) { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, 20em); gap:2em 1em; justify-content:center; margin:0; padding:0; }
article ul:nth-child(2) li { margin:0; padding:0; border-radius:0.4em; box-shadow:var(--3dschatten);}
article ul:nth-child(2) h2 { margin:0 0 0.4em 0; padding:0; font-family:var(--font-serif); }
article ul:nth-child(2) h2 a { display:block; min-height:18.8em; transition:var(--trans); border-radius:0.4em 0.4em 0 0; }
article ul:nth-child(2) h2 a:hover { filter:invert(100%); }
article ul:nth-child(2) img { margin:0 0 0.6em 0; padding:0; width:100%; height:auto; display:block; margin-left:0; border-radius:0.4em 0.4em 0 0; }
article ul:nth-child(2) h2 a { padding:0 0.6em; }
article ul:nth-child(2) h2 a img { margin:0 -0.6em 0.4em -0.6em; width:calc(100% + 1.2em); }
article ul:nth-child(2) p { padding:0 0.6em; margin:0 0 0.6em 0; min-height:7em; }
article ul:nth-child(2) aside { padding:0 0.6em 0.6em; margin:0; }

figure { margin:0; padding:0; }
figure img { width:100%; height:auto; margin:0.05em 0 0 0; padding:0; border-radius:0.4em; box-shadow:var(--3dschatten); }

main > aside { margin:0em 0 0 0.4em; padding:0; }
main > aside h2 { display:none; }
main > aside dt { clear:both; }
main > aside ul { list-style:none; padding:0; margin:0; }
main > aside li { float:left; margin:0 0.2em 0.4em 0.2em; }
main > aside a { padding:0.3em; }
main > aside img { margin:0 0.2em; }
main > aside dd:last-child
a::after { content:"↗"; font-size:1em; vertical-align:super; color:#000; margin:0.1em; }

nav[aria-label="Weitere Gedichte"] { margin:0 0 0.5em 0.5em; padding:0; }
nav[aria-label="Weitere Gedichte"] h2 { font-size:1em }
nav[aria-label="Weitere Gedichte"] ul { list-style:none; margin:0; padding:0; }
nav[aria-label="Weitere Gedichte"] li { float:left; margin:0 0.4em 0 0; padding:0; width:calc(33% - 0.4em);}
nav[aria-label="Weitere Gedichte"] li:last-child { text-align:right; }
nav[aria-label="Weitere Gedichte"] a { display:block; min-height:9.7em; font-size:0.9em; hyphens:auto; hyphenate-limit-chars:auto 3; hyphenate-limit-lines:2; hyphenate-limit-last: none; }
nav[aria-label="Weitere Gedichte"] img { width:100%; height:auto; }
.current-post { opacity:0.33; text-align:center; }

nav[aria-label="Pagination"] { padding:0.5em 0 0; margin:0; height:2rem; }
nav[aria-label="Pagination"] ul { display:flex; justify-content:center; list-style:none; text-align:center; width:100%; margin:0; padding:0; }
nav[aria-label="Pagination"] li { float:left; margin:0 0.25em; padding:0; }
nav[aria-label="Pagination"] li a, nav[aria-label="Pagination"] li a:hover { margin:0; padding:0.4em 0.6em; border-radius:0.3em 50% 50% 0.3em; }
nav[aria-label="Pagination"] li:first-child a, nav[aria-label="Pagination"] li:first-child a:hover { border-radius:50% 0.3em 0.3em 50%; }
nav[aria-label="Pagination"] li:only-child a, nav[aria-label="Pagination"] li:only-child a:hover { margin:0 0.2em; padding:0.4em 0.6em; border-radius:0.3em 50% 50% 0.3em; }

footer { clear:left; font-size:0.9em; margin:2em 0 0.4em 0.2em; padding:0 0 1.5rem 0; }

section h2 { float:left; margin:0 0.4em 0 0; width:6.1rem;}

.plugin-tags ul { margin:0 0 0 7rem; padding:0; list-style:none; }
.plugin-tags li { float:left; margin:0.2rem 0.4rem 0.2rem 0; padding:0; min-height:2em; }
.plugin-tags a { vertical-align:middle; padding:0.4em; }

.xs { font-size:0.8em; }
.s { font-size:0.9em; }
.m { font-size:1em; }
.l { font-size:1.1em; }
.xl { font-size:1.2em; }

.imprint { clear:left; margin:1em 0; padding:0.5em 0.2em 0 0; }
.imprint p { margin:0.2em 0 0 7rem; padding:0 0 0.5em 0.2em; }

.technical { font-size:0.8em; float:left; width:15rem; padding:0 1em 0 0; border-right:0.15em solid #000; }
.technical ul { list-style:none; margin:0; padding:0; }
.technical li { float:left; margin:0.2em 0.4em; padding:0; }
.technical a { padding:0.4em; }

.social-media { font-size:0.8em; float:left; padding:0 1em 0 0; margin:0 0 2em 2em; }
.social-media ul { list-style:none; margin:0; padding:0; display:flex; }
.social-media li { margin:0 0.4em 0 0; padding:0; }
.social-media a { display:flex; align-items:center; margin:0; padding:0 0.4em; transition:var(--trans); }
.social-media a:hover { filter:invert(100%); }
.social-media a::after { content:"↗"; vertical-align:super; color:#000; margin:0.1em; }
.social-media img { padding:0; margin:0 0.4em 0 0; }

.fett { font-weight:700; }
.dot { border-top:0.1em dashed #000; padding-top:1em; margin-top:1em; }


/* Small Screen */
/* Hamburger-Menü für kleine Bildschirme */
.menu-toggle { display:none; position:relative; cursor:pointer; padding:0.4em; margin:0.15em 0 0 0; border-radius:0.3em; background:transparent; border:none; font-size:1.4em; font-weight:700; transition:var(--transition-standard, all 1.5s ease); }

.menu-toggle:hover { color:#fff; background:#000; }

/* Checkbox verstecken */
#menu-checkbox { display:none; }

/* Hamburger-Icon (drei Striche) */
.hamburger { display:block; width:1.5625em; height:0.1875em; background:#000; margin:0.3125em 0; transition:0.3s; border-radius:0.125em; }
.hamburger::before, .hamburger::after { content:''; display:block; width:1.5625em; height:0.1875em; background:#000; margin:0.3125em 0; transition:0.3s; border-radius:0.125em; }
.hamburger::before { transform:translateY(-0.5em); }
.hamburger::after { transform:translateY(0.3125em); }

/* Animation wenn Menü geöffnet ist */
#menu-checkbox:checked ~ .menu-toggle .hamburger { background:transparent; }

#menu-checkbox:checked ~ .menu-toggle .hamburger::before { transform:rotate(45deg); }

#menu-checkbox:checked ~ .menu-toggle .hamburger::after { transform:rotate(-45deg) translateY(-0.6em); }

/* Hamburger-Icon Farbe bei Hover */
.menu-toggle:hover .hamburger, .menu-toggle:hover .hamburger::before, .menu-toggle:hover .hamburger::after { background:#fff; }

/* Mobile Navigation Styles */
@media (max-width:768px) {
	html, body { overflow-x:hidden; }
	html { margin:0 auto; }
	
	nav[aria-label="Hauptnavigation"] { grid-template-columns:1fr auto; }
	.menu-toggle { display:block; float:right; clear:right; }
	
	nav[aria-label="Hauptnavigation"] ul { position:absolute; top:calc(100% + 0.5em); left:0; right:0; background:#fef6e9; border:0.1em solid #000; border-radius:0.4em; margin:0; padding:0.5em 0; box-shadow:0 0.2em 0.5em rgba(0,0,0,0.1); z-index:1000; max-height:0; overflow:hidden; opacity:0; transition:max-height 0.4s ease, opacity 0.3s ease; }
	
	/* Menü anzeigen wenn Checkbox gecheckt ist */
	#menu-checkbox:checked ~ ul { max-height:20em; opacity:1; }
	
	nav[aria-label="Hauptnavigation"] ul li { float:none; display:block; margin:0; padding:0; border-bottom:0.1em solid rgba(0,0,0,0.1); }
	
	nav[aria-label="Hauptnavigation"] ul li:last-child { border-bottom:none; }
	
	nav[aria-label="Hauptnavigation"] li a { display:block; padding:0.8em 1em; margin:0; border-radius:0; text-align:left; width:100%; box-sizing:border-box; }
	
	/* Suchfeld im Hamburger-Menü */
	nav[aria-label="Hauptnavigation"] .search-item { padding:0.8em 1em; border-bottom:none; background:rgba(0,0,0,0.05); display:block; }
	
	nav[aria-label="Hauptnavigation"] .search-item form { display:flex; gap:0.5em; align-items:center; width:100%; }
	
	nav[aria-label="Hauptnavigation"] .search-item input[type="search"] { flex:1; padding:0.5em; border:0.1em solid #000; border-radius:0.3em; font-family:var(--font-sans-serif); font-display: swap; font-size:1em; background:#fff; min-width:0; }
	
	nav[aria-label="Hauptnavigation"] .search-item button { padding:0.5em 0.8em; border:0.1em solid #000; border-radius:0.3em; background:#000; color:#fff; cursor:pointer; transition:all 0.3s ease; flex-shrink:0; }
	
	nav[aria-label="Hauptnavigation"] .search-item button:hover { background:#333; }
	
	/* Logo/Hauptlink anpassen */
	nav[aria-label="Hauptnavigation"] > a { float:left; margin-right:auto; }
	
	/* Suchfeld auf Desktop verstecken wenn es im Hamburger ist */
	nav[aria-label="Hauptnavigation"] div { display:none; }
	
	/* Navigation Container relativ positionieren */
	nav[aria-label="Hauptnavigation"] { position:relative; overflow:visible; min-height:3em; }
	
	/* Clearfix für die Navigation */
	nav[aria-label="Hauptnavigation"]::after { content:""; display:table; clear:both; }
	
	main { padding:0 0 0.8em 0; }
	
	/* Breadcrumb anpassen */
	.breadcrumb { flex-wrap:wrap; }
}

/* Für sehr kleine Bildschirme */
@media (max-width:480px) {
	nav[aria-label="Hauptnavigation"] > a { font-size:1.2em; }
	nav[aria-label="Hauptnavigation"] li a { padding:0.6em 0.8em; }
}

/* Mobile Grid Layout für Bildschirme kleiner als 768px */
@media (max-width:768px) and (orientation:portrait), (max-width:480px) {
	main { grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto; gap:0.5em; }
	
	.breadcrumb { grid-column:1; grid-row:1; margin-top:0.8em; }
	
	article#Gekritzeltes, article#Gedichtetes, article#Gesungenes, article#static { grid-column:1; grid-row:2; }
	
	figure { grid-column:1; grid-row:3; }
	article#Gekritzeltes + figure, article#Gedichtetes + figure, article#Gesungenes + figure { gap:0em; margin-top:-0.5em; }
	
	main > aside { grid-column:1; grid-row:4; }
	
	nav[aria-label="Weitere Gedichte"] { grid-column:1; grid-row:5; }
	h1 { font-size:1.6em; }
	.technical { border-right:none; }
	.social-media { clear:left; margin:1em 0; padding:0.5em 0.2em 0 0; } 
}
/* Pagination anpassen */
@media (max-width:1024px) {
	nav[aria-label="Weitere Gedichte"] li { width:calc(50% - 0.4em);}
	.current-post { display:none; }
}