/*
Theme Name: Interactive Links
Theme URI: https://example.com
Author: Florian Hennefarth
Author URI: https://example.com
Description: Ein eigenständiges WordPress-Theme mit vollflächiger interaktiver Linkliste, bei der beim Hovern ein Bild der Maus folgt, sowie einem runden Hamburger-Icon, das ein Vollbild-Menü öffnet (Menü-Inhalt frei über Design > Menüs editierbar).
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: interactive-links
*/

/* ==========================================================================
   1. Grundlagen / Reset
   ========================================================================== */

:root {
  --color-bg: #000000;
  --color-bg-rgb: 0, 0, 0;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.55);
  --color-border: rgba(255, 255, 255, 0.18);
  --color-accent: #ffffff;
  --color-link-hover: var(--color-text);
  --font-heading: "Times New Roman", Georgia, serif;
  --font-body: Helvetica, Arial, sans-serif;
  --transition-fast: 0.3s ease;
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.il-theme-light {
  --color-bg: #ffffff;
  --color-bg-rgb: 255, 255, 255;
  --color-text: #000000;
  --color-text-muted: rgba(0, 0, 0, 0.55);
  --color-border: rgba(0, 0, 0, 0.18);
  --color-accent: #000000;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  transition: background-color var(--transition-fast);
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.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;
  width: 1px;
  word-wrap: normal !important;
}

/* ==========================================================================
   1c. Seiten-Einblendung beim Laden
   ========================================================================== */

/*
 * Beim ersten Laden einer Seite blenden Header, Menü-Trigger,
 * Haupt-Content und Footer gemeinsam, in einem einheitlichen Moment,
 * sanft von unsichtbar auf sichtbar ein (reine Opacity, keine Bewegung).
 * Das Logo hat bereits seine eigene, ähnlich getimte Einblend-Animation
 * (.il-logo-animated) und bleibt davon unberührt, läuft aber im selben
 * Zeitfenster, sodass der Gesamteindruck einheitlich wirkt.
 */
.il-header,
.il-header__actions .il-hamburger,
.il-header__actions .il-mode-toggle,
#il-page-content,
.il-footer {
  opacity: 0;
  animation: il-page-fade-in 0.9s ease 0.1s forwards;
}

@keyframes il-page-fade-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .il-header,
  .il-header__actions .il-hamburger,
  .il-header__actions .il-mode-toggle,
  #il-page-content,
  .il-footer {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   1b. Körnungs-/Rausch-Overlay (Grain)
   ========================================================================== */

/*
 * Dezentes, prozedural per SVG-Filter erzeugtes Filmkörnungs-Rauschen über
 * dem gesamten Hintergrund (beide Farbmodi). Liegt fix über allem
 * (z-index: 1000, also auch über dem Vollbild-Menü-Overlay), ist aber rein
 * dekorativ: pointer-events deaktiviert, sodass Klicks und Hover-Effekte
 * normal durch das Overlay hindurch funktionieren. Die Bewegung kommt
 * durch ein winziges, sich wiederholendes Verschieben der Rauschmusters –
 * bewusst sehr klein und langsam, damit es nicht ablenkt, der Hintergrund
 * aber auch nicht komplett statisch wirkt.
 */
.il-grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  animation: il-grain-shift 1.1s steps(6) infinite;
  will-change: background-position;
}

html.il-theme-light .il-grain-overlay {
  /* Im hellen Modus wirkt "overlay" auf weißem Untergrund kaum sichtbar;
     "multiply" sorgt dort für einen vergleichbar deutlichen Effekt. */
  mix-blend-mode: multiply;
  opacity: 0.09;
}

@keyframes il-grain-shift {
  0%   { background-position: 0% 0%; }
  10%  { background-position: -8% 3%; }
  20%  { background-position: 5% -10%; }
  30%  { background-position: -12% 6%; }
  40%  { background-position: 9% -4%; }
  50%  { background-position: -5% 11%; }
  60%  { background-position: 12% -7%; }
  70%  { background-position: -9% 2%; }
  80%  { background-position: 6% -11%; }
  90%  { background-position: -3% 8%; }
  100% { background-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .il-grain-overlay {
    animation: none;
  }
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.il-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  pointer-events: none;
}

.il-header__logo,
.il-header__actions {
  pointer-events: auto;
}

.il-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.il-header__logo a {
  display: inline-block;
}

.il-header__logo img {
  height: 42px;
  width: auto;
}

/*
 * Zwei modus-abhängige Logo-Versionen (über Design > Anpassen >
 * Allgemeines Erscheinungsbild hochladbar): standardmäßig sind beide
 * ausgeblendet, je nach aktuell aktivem Farbmodus wird genau eine davon
 * sichtbar gemacht. Das läuft rein über CSS (keine Opacity-Überblendung),
 * damit der Logo-Wechsel beim Umschalten sofort und ohne Versatz erfolgt –
 * passend zum Hell/Dunkel-Switch, der ebenfalls ohne Seiten-Reload läuft.
 */
.il-header__logo-img {
  display: none;
  height: 42px;
  width: auto;
}

html.il-theme-dark .il-header__logo-img--dark {
  display: block;
}

html.il-theme-light .il-header__logo-img--light {
  display: block;
}

.il-header__logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   2b. Logo-Animation: Einblenden beim Laden + prägnantes, dauerhaftes Schweben
   ========================================================================== */

.il-logo-animated {
  opacity: 0;
  transform: translateY(-14px);
  animation:
    il-logo-fade-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards,
    il-logo-float-prominent 3s ease-in-out 1.05s infinite;
}

@keyframes il-logo-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes il-logo-float-prominent {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-9px) rotate(-3deg) scale(1.03);
  }
  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  75% {
    transform: translateY(7px) rotate(3deg) scale(0.98);
  }
}

@keyframes il-logo-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

.il-logo-animated a {
  display: inline-block;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.il-logo-animated a:hover {
  transform: scale(1.045);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .il-logo-animated {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .il-logo-animated a:hover {
    transform: none;
  }
}

/* ==========================================================================
   2c. Hell/Dunkel-Switch
   ========================================================================== */

.il-mode-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.il-mode-toggle:hover {
  border-color: var(--color-text);
  transform: scale(1.06);
}

.il-mode-toggle__icon {
  position: absolute;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.il-mode-toggle__icon--eye-open {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.il-mode-toggle__icon--eye-closed {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.il-theme-light .il-mode-toggle__icon--eye-open {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.il-theme-light .il-mode-toggle__icon--eye-closed {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* ==========================================================================
   3. Hamburger-Button: solider, gefüllter Kreis (ohne Icon/Linien)
   ========================================================================== */

.il-hamburger {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-text);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.il-hamburger:hover {
  animation: il-hamburger-pulse 1.1s ease-in-out infinite;
}

@keyframes il-hamburger-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}

.il-hamburger:active {
  transform: scale(0.92);
  animation: none;
}

/*
 * Bei geöffnetem Menü verschwindet der gefüllte Kreis komplett (kein
 * Hintergrund mehr, keine Hover-Pulsation), übrig bleibt ausschließlich
 * das freistehende X-Icon in der normalen Textfarbe.
 */
.il-hamburger.is-active {
  background-color: transparent;
}

.il-hamburger.is-active:hover {
  animation: none;
}

.il-hamburger__close-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  color: var(--color-text);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.il-hamburger.is-active .il-hamburger__close-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .il-hamburger:hover {
    animation: none;
    transform: scale(1.06);
  }
}

/* ==========================================================================
   4. Vollbild-Menü-Overlay
   ========================================================================== */

.il-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform var(--transition-slow), opacity var(--transition-slow), visibility var(--transition-slow);
}

.il-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.il-menu-overlay__inner {
  text-align: center;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px 20px;
}

.il-main-nav ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.il-main-nav > ul > li > a {
  font-family: var(--font-heading);
  /* font-size, font-weight, letter-spacing, text-decoration/transform/style
     sind Standardwerte; überschreibbar über Design > Anpassen > Typografie – Menü. */
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.3;
  display: inline-block;
  color: var(--color-text);
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
  transition: color var(--transition-fast), -webkit-text-stroke-color var(--transition-fast), letter-spacing var(--transition-fast);
}

/*
 * Beim Hovern wird die Füllung des Textes transparent gemacht und stattdessen
 * nur der Umriss (Outline) in der Textfarbe angezeigt. -webkit-text-stroke
 * wird von allen gängigen modernen Browsern (Chrome, Edge, Safari, Firefox
 * ab v49) unterstützt. Als Fallback für ältere Browser ohne Unterstützung
 * bleibt der Text einfach normal gefüllt sichtbar (kein Bruch, nur kein
 * Outline-Effekt).
 */
.il-main-nav > ul > li > a:hover {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-text);
  text-stroke: 1.5px var(--color-text);
  text-decoration-color: var(--color-text);
}

@supports not (-webkit-text-stroke: 1px black) {
  .il-main-nav > ul > li > a:hover {
    color: var(--color-text);
    opacity: 0.5;
  }
}

.il-main-nav .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 18px;
}

.il-main-nav .sub-menu a {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.il-main-nav .sub-menu a:hover {
  color: var(--color-text);
}

.il-main-nav .menu-item-has-children > a::after {
  content: "";
}

/*
 * Zusatzinhalt aus der Widget-Area "Menü-Overlay – Zusatzinhalt"
 * (Design > Widgets), erscheint unterhalb des Haupt-Menüs im selben
 * Vollbild-Overlay. Bewusst kleiner und zurückhaltender gestaltet als die
 * großen Menü-Haupteinträge, damit die Hierarchie klar bleibt: Menü zuerst,
 * Zusatzinfos (Kontakt, Social Links, kurzer Text etc.) danach.
 */
.il-menu-overlay__widgets {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-muted);
}

.il-menu-overlay__widget {
  max-width: 480px;
}

.il-menu-overlay__widget-title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.il-menu-overlay__widget p {
  margin: 0 0 8px;
}

.il-menu-overlay__widget a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition-fast);
}

.il-menu-overlay__widget a:hover {
  opacity: 0.6;
}

/* Listen-Widgets (z. B. Social-Icon-Plugins) nebeneinander statt untereinander. */
.il-menu-overlay__widget ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   5. Interaktive Links-Sektion
   ========================================================================== */

.il-interactive {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 40px 80px;
}

.il-interactive__list {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 28px 36px;
}

.il-interactive__item {
  display: inline-flex;
  align-items: baseline;
}

.il-interactive__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 10px 0;
  font-family: var(--font-heading);
  /* font-weight, font-size, letter-spacing und text-transform sind Standardwerte;
     sie werden über Design > Anpassen > Typografie – Interaktive Links überschrieben. */
  font-weight: 700;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: opacity var(--transition-fast), color var(--transition-fast);
  z-index: 1;
  animation: il-interactive-link-float 6s ease-in-out infinite;
}

/*
 * Jedes Wort bekommt einen leicht versetzten Start-Zeitpunkt, damit die
 * gesamte Liste nicht synchron im Gleichschritt wabert, sondern organisch
 * und unabhängig wirkt – ähnlich wie unregelmäßig treibende Objekte. Die
 * nth-child-Selektoren wirken auf die <li>-Elemente der Liste; insgesamt
 * 6 unterschiedliche Verzögerungsstufen, die sich danach wiederholen.
 */
.il-interactive__item:nth-child(6n + 1) .il-interactive__link { animation-delay: 0s; }
.il-interactive__item:nth-child(6n + 2) .il-interactive__link { animation-delay: -1s; }
.il-interactive__item:nth-child(6n + 3) .il-interactive__link { animation-delay: -2s; }
.il-interactive__item:nth-child(6n + 4) .il-interactive__link { animation-delay: -3s; }
.il-interactive__item:nth-child(6n + 5) .il-interactive__link { animation-delay: -4s; }
.il-interactive__item:nth-child(6n + 6) .il-interactive__link { animation-delay: -5s; }

@keyframes il-interactive-link-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Beim Hovern bleibt der Link ruhig stehen, damit die Maus-Verfolgung des Bildes nicht "zittert". */
.il-interactive__item:hover .il-interactive__link {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .il-interactive__link {
    animation: none;
  }
}

/*
 * Trennzeichen nach jedem Link: ein kleiner, solider Kreis im gleichen
 * Stil wie der Hamburger-Button (reine CSS-Form statt Text-Zeichen, damit
 * Größe, Farbe und Rundung exakt steuerbar sind).
 */
.il-interactive__link::after {
  content: "";
  display: inline-block;
  align-self: center;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.22em;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

/*
 * Der Linktext bleibt beim Hovern immer normal lesbar. Das Hover-Bild
 * (.il-interactive__image) liegt mit höherem z-index VOR dem Text und
 * folgt der Maus, wodurch es den Text an der jeweiligen Stelle überdeckt.
 * Ist KEIN Bild hinterlegt, greift stattdessen die Hover-Farbe/Abdunklung
 * des Textes (siehe .il-interactive__item.has-image weiter unten für die
 * Bild-Logik).
 */
.il-interactive__item:not(.has-image):hover .il-interactive__link {
  color: var(--color-link-hover);
  opacity: 0.45;
}

.il-interactive__item.has-individual-hover-color:not(.has-image):hover .il-interactive__link {
  color: var(--color-link-hover-individual);
  opacity: 1;
}

.il-interactive__image {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity var(--transition-fast);
  will-change: transform, opacity;
}

/*
 * Die Schwebe-/Einblend-Animation läuft bewusst auf dem inneren <img>
 * statt auf .il-interactive__image selbst, weil der äußere Wrapper per
 * JavaScript der Mausposition folgt (left/top + eigenes transform).
 * So überschreiben sich die beiden Animationen nicht gegenseitig.
 */
.il-interactive__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  animation: il-logo-float 4.5s ease-in-out infinite;
}

.il-interactive__item:hover .il-interactive__image {
  opacity: 1;
}

.il-interactive.no-hover-images .il-interactive__image {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .il-interactive__image img {
    animation: none;
  }
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.il-footer {
  padding: 30px 50px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.il-footer a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .il-header {
    padding: 22px 24px;
  }

  .il-hamburger {
    width: 32px;
    height: 32px;
  }

  .il-mode-toggle {
    width: 32px;
    height: 32px;
  }

  .il-header__actions {
    gap: 10px;
  }

  .il-interactive {
    padding: 120px 20px 60px;
  }

  .il-interactive__list {
    flex-direction: column;
    align-items: center;
    gap: 4px 0;
  }

  .il-interactive__image {
    display: none;
  }

  .il-interactive__link {
    padding: 8px 6px;
  }

  /*
   * Auf Mobilgeräten wird das Hover-Bild ohnehin nicht angezeigt (siehe
   * .il-interactive__image { display: none } oben). Der Transparent-Effekt
   * für Links mit Bild würde dort sonst den Text unlesbar verschwinden
   * lassen, ohne dass etwas Sichtbares an seine Stelle tritt – daher hier
   * auf das bisherige, einfache Abdunklungsverhalten zurückfallen.
   */
  .il-interactive__item.has-image:hover .il-interactive__link {
    color: var(--color-link-hover);
    opacity: 0.45;
  }

  .il-interactive__item.has-image.has-individual-hover-color:hover .il-interactive__link {
    color: var(--color-link-hover-individual);
    opacity: 1;
  }
}

/*
 * Touch-Geräte (z. B. iPad und ähnliche Tablets, aber auch Touch-Laptops),
 * unabhängig von der tatsächlichen Bildschirmbreite: Das Hover-Bild, das
 * sonst der Mausposition folgt, erzeugt dort einen Darstellungsfehler
 * (es bleibt z. B. an der letzten Touch-Position "kleben", da es keinen
 * echten Mauszeiger gibt, der es bewegt). "hover: none" und
 * "pointer: coarse" erkennen gemeinsam zuverlässig Geräte ohne feine,
 * hover-fähige Zeigereingabe – das erfasst auch große Tablets, die der
 * reine Pixel-Breakpoint oben (max-width: 768px) nicht abdeckt.
 */
@media (hover: none), (pointer: coarse) {
  .il-interactive__image {
    display: none;
  }

  .il-interactive__item.has-image:hover .il-interactive__link {
    color: var(--color-link-hover);
    opacity: 0.45;
  }

  .il-interactive__item.has-image.has-individual-hover-color:hover .il-interactive__link {
    color: var(--color-link-hover-individual);
    opacity: 1;
  }
}

/* ==========================================================================
   8. Seiten-Layout (page.php)
   ========================================================================== */

.il-page-main {
  padding-bottom: 100px;
}

/*
 * Beitragsbild als Header-Visual: boxed (nicht volle Bildschirmbreite),
 * liegt mit Mindestabstand zum fixierten Header in einer begrenzten,
 * zentrierten Box – etwas breiter als die Textspalte, damit es trotzdem
 * als Blickfang wirkt, aber klar als abgesetzter Inhaltsblock erkennbar
 * bleibt statt über die volle Seitenbreite zu laufen.
 */
.il-page__header-image {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  padding-top: 100px;
  height: min(70vh, 720px);
  min-height: 320px;
  box-sizing: border-box;
}

.il-page__header-image img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.il-page__content-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Ohne Beitragsbild: Mindestabstand zum fixierten Header oben einplanen. */
.il-page--no-image .il-page__content-wrap {
  padding-top: 100px;
}

/* Mit Beitragsbild: etwas Abstand zwischen Bild und Titel. */
.il-page--has-image .il-page__content-wrap {
  padding-top: 48px;
}

.il-page__header {
  margin-bottom: 32px;
}

.il-page__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(36px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.il-page__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text);
}

.il-page__body p {
  margin: 0 0 24px;
}

.il-page__body h2 {
  margin: 48px 0 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
}

.il-page__body h3 {
  margin: 36px 0 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.3;
}

/*
 * Listen werden zentriert ausgegeben (kein Aufzählungspunkt am linken
 * Rand): Aufzählungszeichen wandert mit nach innen, damit jede Zeile als
 * Block mittig steht statt einseitig an einer Linksbündigkeits-Kante zu
 * "kleben".
 */
.il-page__body ul,
.il-page__body ol {
  margin: 0 0 24px;
  padding-left: 0;
  list-style-position: inside;
}

.il-page__body li {
  margin-bottom: 8px;
}

.il-page__body a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--transition-fast);
}

.il-page__body a:hover {
  opacity: 0.6;
}

.il-page__body img {
  max-width: 100%;
  border-radius: 4px;
  margin: 32px auto;
}

.il-page__body blockquote {
  margin: 32px auto;
  padding-left: 0;
  border-left: none;
  font-style: italic;
  color: var(--color-text-muted);
}

/*
 * Zusätzliche Stile für Blogbeiträge (single.php) und die Beitragsliste
 * (index.php) – nutzen dieselben .il-page__*-Klassen wie normale Seiten,
 * damit der Look konsistent bleibt, ergänzt um ein paar blog-spezifische
 * Details (Datum, Trennlinie zwischen Listen-Einträgen, kleinere
 * Titel-Variante für Linktitel in der Liste).
 */
.il-blog-entry__date {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.il-page__title--small {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
}

.il-page__title--small a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.il-page__title--small a:hover {
  opacity: 0.6;
}

.il-blog-entry {
  margin-bottom: 56px;
}

.il-blog-entry__divider {
  max-width: 200px;
  margin: 0 auto 56px;
  border: none;
  border-top: 1px solid var(--color-border);
}

.il-pagination {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 600px) {
  .il-page__header-image {
    height: min(50vh, 480px);
    min-height: 220px;
    padding-top: 100px;
  }

  .il-page--no-image .il-page__content-wrap {
    padding-top: 100px;
  }

  .il-page--has-image .il-page__content-wrap {
    padding-top: 32px;
  }

  .il-page__body {
    font-size: 16px;
  }
}

/* ==========================================================================
   9. Elementor-Kompatibilität (Best-Effort)
   ========================================================================== */

/*
 * Seiten, die mit dem Page-Builder Elementor erstellt werden, rendern
 * ihren Inhalt komplett über eigene Elementor-Container/-Sections statt
 * über das normale Theme-Layout (page.php) – das Theme hat darauf
 * eigentlich keinen direkten Einfluss mehr, da Elementor sein eigenes
 * CSS und teilweise Inline-Styles für Breiten setzt.
 *
 * Dieser Block versucht trotzdem, Elementors "Full Width"-Container auf
 * eine sinnvolle, zentrierte Maximalbreite zu begrenzen (Best-Effort,
 * KEINE Garantie): Inline-Styles, die Elementor direkt am Element setzt,
 * haben in der CSS-Kaskade Vorrang vor externen Stylesheets, auch vor
 * !important-Regeln hier. Zuverlässiger ist es, den jeweiligen Container
 * in Elementor selbst auf "Boxed" (statt "Full Width") zu stellen – das
 * lässt sich pro Abschnitt direkt in den Elementor-Einstellungen wählen.
 */
body.elementor-page .elementor-section.elementor-section-stretched,
body.elementor-page .e-con.e-con--stretch {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

body.elementor-page .elementor-container,
body.elementor-page .e-con-inner {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Innenabstand links/rechts, damit Inhalte nicht direkt am Bildschirmrand kleben. */
body.elementor-page .elementor-section,
body.elementor-page .e-con {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Mindestabstand zwischen Inhalt und dem fixierten Theme-Header. */
body.elementor-page #il-page-content > .elementor,
body.elementor-page #il-page-content > .elementor:first-child {
  padding-top: 100px;
}