/*!
Theme Name: WordWorldConnection
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wordworldconnection
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

WordWorldConnection is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
  font-family: "HackFont"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/Hack-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "HackFont"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/Hack-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "HackFont"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/Hack-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "HackFont"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/Hack-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "Baskerville"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/libre-baskerville-v24-latin-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "Baskerville"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/libre-baskerville-v24-latin-italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "Baskerville"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/libre-baskerville-v24-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "Baskerville"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/libre-baskerville-v24-latin-700italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "Baskerville"; /* So nennst du den Font in deinem Projekt */
  src: url("fonts/libre-baskerville-v24-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

@font-face {
  font-family: "Baskerville"; /* So nennst du den Font in deinem Projekt */
  src: url("libre-baskerville-v24-latin-500italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap; /* Verhindert, dass Text unsichtbar ist, während der Font lädt */
}

/* ---------------------------------------------------------------------------------- */
/* Zum Wechsel des Wörter-Anzahl-Limits Mobile/Desktop für die Vorschau der Artikel */
/* ---------------------------------------------------------------------------------- */

/* Mobile: Desktop-Teil ausblenden */
.desktop-only {
  display: none;
}
.mobile-only {
  display: block;
}

/* Desktop: Mobile-Teil ausblenden */
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
}

/* Wenn ausgeklappt, beide Teaser verstecken */
/* Wenn ausgeklappt, Vorschau ausblenden */
.is-expanded .preview-text {
  display: none;
}

/* ---------------------------------------------------------------------------------- */

/* Optional: Falls du das "Weiterlesen" auch zentriert haben willst */
.entry-summary p {
  margin-bottom: 0;
}

/* JS aktiv → Fallback verstecken */
.js .react-3d-headline-fallback {
  visibility: hidden;
}

/* Versteckt den Text-Fallback der blog-entry-überschrift, sobald React übernimmt */
/* ------------------------------------------------------------------------------------- */
#react-headline-root canvas {
  display: block;
}

.read-more-btn {
  background-color: transparent;
  color: #3d2e2e;
  border: 2px solid #3d2e2e;
  padding: 10px 20px;
  margin-top: 15px;
  cursor: pointer;
  font-family: "Baskerville", sans-serif;
  border-radius: 5px;
  transition: background 0.3s;
}

.cat-links {
  font-size: 1.0rem;
  font-family: "HackFont", sans-serif;
  font-weight: 700;
  color: #3d2e2e;
}


.comments-link {
  font-size: 1.0rem;
  color: #3d2e2e;
}

.posted-on {
  font-size: 1.0rem;
}

.byline {
  font-size: 1.0rem;
}

.read-more-btn:hover {
  border: 2px solid #3d2e2e;
  background-color: #d49b9b;
}

.read-more-btn:active {
  background-color: transparent;
  border: 2px solid #3d2e2e;
}

.excerpt-wrapper {
  line-height: 1.6;
}
/* ------------------------------------------------------------------------------------- */


/* Den gesamten Auszug-Block stylen */
.entry-summary {
    text-align: center;      /* Alles zentrieren */
    font-style: italic;      /* Kursiv setzen */
    line-height: 1.8;        /* Mehr Zeilenabstand für bessere Lesbarkeit */
    color: #555555;          /* Ein dezentes Grau */
    margin-bottom: 20px;     /* Abstand nach unten */
}

/* Spezielles Styling für Links im Auszug */
.entry-summary a {
    text-decoration: underline;
    font-weight: bold;
}




/* * 1. Fallback SOFORT die "normale Überschrift" visuell verstecken (Kein Blinken mehr!)
 * Wir nutzen die 'clip'-Methode, damit SEO und Screenreader den Text trotzdem sehen.
 * display: none; wäre schlecht für SEO.
 */
.react-3d-headline-fallback {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* * 2. Platzhalter für die React-Headline
 * Verhindert, dass das Layout springt (Layout Shift), während React lädt.
 * Setze min-height auf einen Wert, der ungefähr deiner Schriftgröße entspricht.
 */
.react-3d-headline-root {
  display: block;
  width: 100%;
  min-height: 80px; /* Anpassen je nach gewünschter Schriftgröße */
  opacity: 0; /* Erst unsichtbar */
  transition: opacity 0.5s ease-in-out; /* Sanftes Einblenden */
}

/* * 3. Wenn React fertig ist (wird via JS gesetzt), blenden wir es ein 
 */
.react-3d-headline-root[data-mounted="true"] {
  opacity: 1;
}

/* ===============================
   Header-Bild im Scroll-Logic
   =============================== */
/* 1. Standardzustand des Header-Bildes */
.custom-header-media {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease-in-out,
    visibility 0.5s;
  /* Falls das Bild hinter das Logo soll: */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* 2. Zustand beim Scrollen (identisch mit deinem Logo-Logic) */
body.scrolled .custom-header-media {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* ===============================*/

/* Header-Logo */
#react-logo-root {
  width: 320px;
  height: 200px;

  @media (min-width: 768px) {
    width: 700px;
    height: 500px;
  }

  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);

  pointer-events: none; /* Keine Links blockieren */
  z-index: 10;

  /* Smooth ein-/ausblenden */
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Header-Logo */
#react-logo-root canvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- SCROLLED ZUSTAND --- */

/* 1. Header schrumpfen */
/*  body.scrolled #masthead { */
/*height: 80px;  Ziel-Höhe */
/* Padding bleibt gleich oder wird separat definiert, aber height ist das Wichtigste */
/* } */

/* 2. Menü-Position korrigieren (optional) */
/* Falls dein Menü im Header ist, soll es vermutlich mittig im schmalen Balken stehen */
body.scrolled .main-navigation {
  transform: translateY(5px); /* Feintuning, falls nötig */
  transition: transform 0.3s ease;
}

/* 3. Logo ausblenden, wenn der Header schrumpft */
body.scrolled #react-logo-root {
  opacity: 0;
  /* Macht das Element für Maus-Events komplett "durchsichtig" */
  visibility: hidden;
  /* Sicherheitshalber noch einmal explizit Klicks ausschalten */
  pointer-events: none;

  transition:
    opacity 0.5s ease-in-out,
    visibility 0.5s;
}

.react-3d-headline-root canvas {
  touch-action: pan-y; /* Erlaubt vertikales Scrollen der Seite, auch wenn man auf das Canvas fasst */
}

/* ================================
   Globaler Seiten-Rahmen (Fixed)
   ================================ */

:root {
  /*--frame-thickness: 20px;  Dicke der Seiten & unten */
  --header-height: 150px; /* Höhe des oberen Balkens */
  --frame-color: transparent; /* Deine Hauptfarbe */
  --frame-transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 1. OBEN (Dein Header) */
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 10000;
  background-color: var(--frame-color);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
  transition:
    height var(--frame-transition),
    background-color 0.3s ease;
}

/* 2. LINKS & RECHTS (Über Pseudo-Elemente am Body) */
/* body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--frame-thickness);
  background-color: var(--frame-color);
  z-index: 9999;
  pointer-events: none;  Wichtig: Man kann durch den Rahmen klicken 
  transition: background-color 0.3s ease;
}

body::before {
  left: 0;
}
body::after {
  right: 0;
} */

/* 3. UNTEN (Zusätzliches Element im Footer nötig, siehe unten) */
/* .site-frame-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--frame-thickness);
  background-color: var(--frame-color);
  z-index: 10000;
  pointer-events: none;
  transition: background-color 0.3s ease;
} */

/* PLATZ FÜR DEN CONTENT */
/* body {
   Oben | Rechts | Unten | Links
  padding: var(--header-height) var(--frame-thickness) var(--frame-thickness)
    var(--frame-thickness);
}*/

/* Menü-Links */
.main-navigation a {
  color: #fff;
}

/* ================================
   Responsive & Scroll-Effekte
   ================================ */

/* Beim Scrollen Farbe ändern */
body.scrolled #masthead,
body.scrolled::before,
body.scrolled::after
/* body.scrolled .site-frame-bottom */ {
  background-color: #333; /* Rahmen wird beim Scrollen dunkel (Beispiel) */
}

/* Mobile Anpassungen */
@media screen and (max-width: 768px) {
  :root {
    --frame-thickness: 10px; /* Dünnerer Rahmen auf Handys */
    --header-height: 80px; /* Kleinerer Header auf Handys */
  }

  .main-navigation ul {
    flex-direction: column;
  }
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
# Categories

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

body,
button,
input,
select,
optgroup,
textarea {
  color: #2d2d2d;
  font-family: "Baskerville", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Desktop: Schrift größer */
@media (min-width: 768px) {
  body,
  button,
  input,
  select,
  optgroup,
  textarea {
    color: #2d2d2d;
    font-family: "Baskerville", sans-serif;
    font-size: 1.3rem;
    line-height: 1.7;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "HackFont", sans-serif;
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fffaf0;
  padding-top: 900px;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

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

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

figure.wp-block-image figcaption.wp-element-caption {
  font-size: 0.7em;
} 




/* Links
--------------------------------------------- */
a {
  color: #3d2e2e;
}

a:visited {
  color: #3d2e2e;
}

a:hover,
a:focus,
a:active {
  color: #d49b9b;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #3d2e2e #3d2e2e #3d2e2e;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #3d2e2e #3d2e2e #3d2e2e;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #3d2e2e #3d2e2e #3d2e2e;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  width: 100%;
  z-index: 10;
}

.site-branding {
  z-index: 10;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */

.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

/* 1. Den gesamten Artikel-Container zentrieren */
article.post,
article.page,
.error-404.not-found,
.no-results.not-found {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 100px;
  text-align: left; /* Alles darin startet links */
  padding: 0 1em;
  box-sizing: border-box;
}

/* 2. LOGIK FÜR BILDER (wp-post-image) */
/* Standard: Wenn KEIN Bild da ist, verhält sich alles normal. */
/* Aber: Grundsätzliche Bild-Einstellungen für Zentrierung: */

.wp-post-image {
  display: block;
  margin-left: auto !important; /* Jetzt zentriert! */
  margin-right: auto !important; /* Jetzt zentriert! */
  width: 100%; /* Füllt die Breite der 800px Spur */
  height: auto; /* Höhe passt sich automatisch an */
  max-height: 500px; /* Optional: Begrenzung, damit es nicht riesig wird */
  object-fit: cover; /* Bild füllt den Bereich schön aus */
  border-radius: 8px; /* Optional: sieht meist besser aus */
  margin-bottom: 1.5em;
}

/* 3. LOGIK FÜR DAS 3D-LAYERING (Nur wenn Bild vorhanden ist) */

/* Wenn der Artikel ein Thumbnail hat (.has-post-thumbnail), wird der Header zum "Stapel" */
.has-post-thumbnail .entry-header {
  position: relative; /* Wichtig als Anker */
  display: flex; /* Hilft, Lücken unter Bildern zu vermeiden */
  flex-direction: column;
}

/* Das Bild selbst muss unten liegen */
.has-post-thumbnail .post-thumbnail {
  order: 1; /* Sicherstellen, dass es im Flex-Flow unten/hinten liegt */
  position: relative;
  z-index: 1; /* Ebene 1 */
  margin: 0 !important; /* Kein Margin, damit es bündig ist */
  width: 100%;
}

/* Die 3D-Headline wird DARÜBER gelegt, wenn ein Bild da ist */
.has-post-thumbnail .react-3d-headline-root {
  position: absolute !important;
  top: 50%; /* Vertikal ab Mitte starten */
  left: 50%; /* Horizontal ab Mitte starten */
  transform: translate(-50%, -50%); /* Exakt zentrieren */
  width: 100%;
  z-index: 10; /* Ebene 10 (über dem Bild) */
  pointer-events: none; /* Klicks gehen durch auf das Bild */
}

/* Die Fallback-Headline muss auch absolut positioniert werden, falls React noch lädt */
.has-post-thumbnail .react-3d-headline-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100%;
  text-align: center;
  color: #fff; /* Meistens weißer Text auf Bild besser */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* Schatten für Lesbarkeit */
}

/* Wenn KEIN Bild da ist (kein .has-post-thumbnail), greifen die normalen Regeln */
/* Hier stellen wir sicher, dass die Headline dann NICHT absolut ist */
article:not(.has-post-thumbnail) .react-3d-headline-root {
  position: relative !important;
  transform: none;
  top: auto;
  left: auto;
  margin-bottom: 1.5em;
}

/* 4. Alle inneren Container auf 100% der Spur setzen */
.entry-header,
.entry-content,
.entry-summary {
  width: 100%;
  /* .post-thumbnail hier entfernt, da oben speziell geregelt */
  margin: 0 0 1.5em 0 !important;
  padding: 0;
}



/* ---------------------------------------------------------
   CLEAN LAYERING FIX
   --------------------------------------------------------- */

/* 1. Der Container: Kein Flexbox mehr! */
.has-post-thumbnail .entry-header {
  position: relative; /* Wichtig als Anker */
  display: block; /* Zurück zum Standard-Verhalten */
  width: 100%;
  overflow: hidden; /* Verhindert, dass Ränder rausragen */
}

/* 2. Das Bild: Es ist der "Raumgeber" */
.has-post-thumbnail .post-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 !important; /* Kein Abstand nach unten, damit Meta direkt anschließt */
  z-index: 1; /* Ganz unten */
}

.has-post-thumbnail .post-thumbnail img {
  display: block; /* Entfernt kleine Lücken unter Bildern */
  width: auto;
  height: 320px;
  object-fit: cover;
}

/* 3. Die Headline: Schwebt absolut ÜBER dem Bild */
.has-post-thumbnail .react-3d-headline-root {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Nimmt exakt die Höhe des Bildes an */

  /* Interne Zentrierung des Textes */
  display: flex;
  align-items: center; /* Vertikal mittig */
  justify-content: center; /* Horizontal mittig */

  z-index: 10; /* Liegt über dem Bild */
  pointer-events: none; /* Klicks gehen durch */
  transform: none; /* Kein Verschieben mehr nötig */
  margin: 0 !important;
}

/* Fallback Headline (falls React nicht lädt) */
.has-post-thumbnail .react-3d-headline-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 9;
  text-align: center;
  color: white;
  margin: 0;
  pointer-events: none;
}



/* 4. Die Meta-Daten: Rutschen automatisch unter das Bild */
.entry-meta,
.entry-footer {
  position: relative;
  display: block;
  z-index: 20;
  width: 100%;
  text-align: center; /* Sieht unter einem zentrierten Bild meist besser aus */
  padding-bottom: 0;
  background: transparent;
}




/* ---------------------------------------------------------
   Logik OHNE Bild (Bleibt wie gewünscht)
   --------------------------------------------------------- */
article:not(.has-post-thumbnail) .react-3d-headline-root {
  position: relative !important;
  height: auto;
  margin-bottom: 1.5em;
  display: block;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}



/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}


/*--------------------------------------------------------------
# Categories
--------------------------------------------------------------*/



/* Links der Film-Kategorie, auch Unterkategorien */
/* --------------------------------------------------- */

 a[href*="/category/film/"][rel="category tag"] {
    color: #00b774;
}

a[href*="/category/film/"][rel="category tag"]:hover {
    color: #004c30; 
}


a.cat-level-1-under-film,
a.cat-level-1-under-film:visited {
    color: #00b774;
    font-style: italic;
    font-weight: normal;
}
a.cat-level-1-under-film:hover {
    color: #004c30; 
    font-style: italic;
    font-weight: normal;
}

a.cat-level-2-under-film,
a.cat-level-2-under-film:visited {
    color: #00b774;
    font-style: italic;
    font-weight: normal;
}
a.cat-level-2-under-film:hover {
    color: #004c30; 
    font-style: italic;
    font-weight: normal;
}

/* --------------------------------------------------- */