@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;
	
}

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

/*Standards*/

html { color:#000; background:#fff; font-family:var(--font-sans-serif); background:#fef6e9; }

body { width:96%; max-width:90em; margin:0 auto; padding:0; 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; color:#000; background:#000; border:thin solid #000; }

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

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

h1, h2, h3, h4, h5 { margin:.8em 0 .4em 0; padding:0; font-weight:700; }
h1 { margin:0.5em 0 0 0; font-size:2em; font-family:var(--font-serif); }
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"] { font-family:var(--font-sans-serif); }
nav[aria-label="Hauptnavigation"] > a { float:left; font-size:1.4em; padding:0.2em 0.4em; margin:0.15em 0 0 0; }
nav[aria-label="Hauptnavigation"] > a img { padding:0 0.2em; vertical-align:middle; }

nav[aria-label="Hauptnavigation"] ul { float:left; list-style:none; margin:0.5em 0 0 0.5em; padding:0; }
nav[aria-label="Hauptnavigation"] ul li { float:left; margin:0.4em 0 0 0.8em; padding:0; }
nav[aria-label="Hauptnavigation"] a { display:block; transition: all 1.5s ease; }
nav[aria-label="Hauptnavigation"] a:hover { -webkit-filter: invert(100%); filter: invert(100%); }
nav[aria-label="Hauptnavigation"] li a { padding:0.4em 0.5em; margin:0; border-radius:0.2em 1em 0em 0.5em; }

nav[aria-label="Hauptnavigation"] div { float:right; margin:1em 0 0 0; padding:0.3em; }
nav[aria-label="Hauptnavigation"] input { width:6em; }

main { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto 1fr; gap: 0.5em; }
.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 { 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; }

.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; }

article .Gekritzeltes, nav[aria-label="Hauptnavigation"] .Gekritzeltes a { background:rgb(15 51 65 / 20%); }
article .Gedichtetes, nav[aria-label="Hauptnavigation"] .Gedichtetes a { background:rgb(207 76 46 / 20%); }
article .Gesungenes, nav[aria-label="Hauptnavigation"] .Gesungenes a { background:rgb(55 136 146 / 20%); }

article#Gekritzeltes, article#Gedichtetes, article#Gesungenes { font-family:var(--font-serif), Crimson; font-size:1.2em; margin:0 0 2em 0; padding:0 1.6em 0.6em 1.6em; border-radius:0.4em; }
article#Gekritzeltes { background:rgb(15 51 65 / 20%); }
article#Gedichtetes { background:rgb(207 76 46 / 20%); }
article#Gesungenes { background:rgb(55 136 146 / 20%); }

article#Gekritzeltes header { text-align:left; padding:0.4em 0 0 0; }
article#Gedichtetes header { text-align:left; padding:0.4em 0 0 0; }
article#Gesungenes 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: 1.5em 1.5em; justify-content: center; margin: 0; padding: 0; }
article ul:nth-child(2) li { margin: 0; padding:0; border-radius:0.4em; }
article ul:nth-child(2) h2 { margin: 0 0 0.4em 0; padding: 0; }
article ul:nth-child(2) h2 a { display: block; min-height:18.8em; transition: all 1.5s ease; border-radius:0.4em 0.4em 0 0; }
article ul:nth-child(2) h2 a:hover { -webkit-filter: invert(100%); 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; padding: 0; border-radius: 0.4em; }

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; }

nav[aria-label="Weitere Gedichte"] { margin:0 0 0.5em 0.5em; padding:0; }
nav[aria-label="Weitere Gedichte"] h2 { font-size:1.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"] a { display:block; min-height:9.7em; }
nav[aria-label="Weitere Gedichte"] img { width:100%; height:auto; }
.current-post { opacity: 0.33; }

nav[aria-label="Pagination"] { padding:0.5em 0; margin:0; }
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; padding:0; }
nav[aria-label="Pagination"] li a, nav[aria-label="Pagination"] li a:hover { margin:0 0.2em; 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:0 0 0.4em 0.2em; padding:0; }

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

section:first-child ul { margin:0 0 0 5em; padding:0; list-style:none; }
section:first-child li { float:left; margin:0.2em; padding:0; min-height:2em; }
section:first-child a { vertical-align:middle; padding:8px; }

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

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

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

section.social-media { font-size: 0.8em; float: left; padding: 0 1em 0 0; margin: 0 0 2em 2em; }
section.social-media ul { list-style: none; margin: 0; padding: 0; display: flex; }
section.social-media li { margin: 0 0.4em; padding: 0; }
section.social-media a { display: flex; align-items: center; margin: 0; padding: 0 0.4em; transition: all 1.5s ease; }
section.social-media a:hover { -webkit-filter: invert(100%); filter: invert(100%); }
section.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: 25px;
  height: 3px;
  background: #000;
  margin: 5px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  width: 25px;
  height: 3px;
  background: #000;
  margin: 5px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.hamburger::before {
  transform: translateY(-8px);
}

.hamburger::after {
  transform: translateY(5px);
}

/* 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(-8px);
}

/* 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) {
  .menu-toggle {
    display: block;
    float: right;
    clear: right;
  }
  
  nav[aria-label="Hauptnavigation"] ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fef6e9;
    border: 2px solid #000;
    border-radius: 0.4em;
    margin: 0.2em 0 0 0;
    padding: 0.5em 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    
    /* Versteckt standardmäßig */
    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: 500px;
    opacity: 1;
  }
  
  nav[aria-label="Hauptnavigation"] ul li {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 1px 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;
  }
  
  /* Logo/Hauptlink anpassen */
  nav[aria-label="Hauptnavigation"] > a {
    float: left;
    margin-right: auto;
  }
  
  /* Suchfeld anpassen */
  nav[aria-label="Hauptnavigation"] div {
    float: none;
    clear: both;
    margin: 0.5em 0 0 0;
    text-align: center;
  }
  
  /* Navigation Container relativ positionieren */
  nav[aria-label="Hauptnavigation"] {
    position: relative;
    overflow: visible;
  }
}

/* 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;
  }
}