@charset "UTF-8";
/**
* Theme Name:              Androva
* Theme URI:               https://grellmann.net/
* Author:                  André Grellmann
* Author                   URI:https://grellmann.net/
* Version:                 2025.1.1
* Tested up to:            6.8.3
* Requires at least:       6.0.0
* Requires PHP:            8.0.0
* License:                 GNU General Public License v2 or later
* License URI:             https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain:             androva
* Copyright:               Copyright (c) 2025 André Grellmann, D-31249 Hohenhameln
* Tags:                    accessible, responsive, classic-theme, modular, performance, seo-friendly, dark-mode, grid-layout, flexbox, glassmorphism, modern-ui, customizer, translation-ready, privacy-friendly
* Description:             Androva ist ein modernes, datenschutzfreundliches WordPress Classic-Theme mit klarer Trennung von Struktur, Logik und Design. Es bietet ein responsives Grid- und Flexbox-Layout, clamp-basierte Typografie, Dark-Mode-Untersteutzung und einheitliche Utility-Klassen. Alle wichtigen Funktionen wie SEO-Optimierung, Consent-System, Navigation mit Suche, SVG-Sprites und Performance-Tweaks sind direkt integriert, ohne externe Plugins. Ideal feur Entwickler und Agenturen, die Wert auf Modularitaet, Skalierbarkeit und eine zukunftssichere Architektur legen.
* SPDX-License-Identifier: GPL-2.0-or-later
*/
/* ===================================
   Root Variablen
=================================== */
:root {
  /* === Textfarben === */
  --color-text: #1e1e1e; /* Standardtextfarbe - Kontrast zu #f1f3f5: 15.0:1 */
  --color-text-rgb: 30 30 30;
  --color-text-rgba: rgba(30, 30, 30, 1);
  --color-muted: #4c566a; /* Sekundaertext, Hinweise, Labels - Kontrast zu #ffffff: 7.5:1 */
  --color-muted-rgb: 76 86 106;
  --color-muted-rgba: rgba(76, 86, 106, 1);
  /* === Hintergrundfarben === */
  --color-bg-light: #f1f3f5; /* Helle Flaechen, z. B. Header, Cards - Kontrast zu #1e1e1e: 15.0:1 */
  --color-bg-light-rgb: 241 243 245;
  --color-bg-light-rgba: rgba(241, 243, 245, 1);
  --color-bg-dark: #1f2937; /* Dunkle Flaechen, z. B. Footer, Sidebar - Kontrast zu #ffffff: 14.7:1 */
  --color-bg-dark-rgb: 31 41 55;
  --color-bg-dark-rgba: rgba(31, 41, 55, 1);
  --color-white: #ffffff; /* Reines Weiss fuer Kontrastflaechen - Kontrast zu #1f2937: 14.7:1 */
  --color-white-rgb: 255 255 255;
  --color-white-rgba: rgba(255, 255, 255, 1);
  /* === Seitenhintergrund === */
  --color-bg-site: #f8fafc; /* Grundflaeche der Seite (html, body) - Kontrast zu #1e1e1e: 15.9:1 */
  --color-bg-site-rgb: 248 250 252;
  --color-bg-site-rgba: rgba(248, 250, 252, 1);
  /* === Primaerfarben === */
  --color-primary: #004A94; /* Hauptakzentfarbe (Buttons, Links, Icons) - Kontrast zu #ffffff: 6.6:1 */
  --color-primary-rgb: 0 74 148;
  --color-primary-rgba: rgba(0, 74, 148, 1);
  /* === Sekundaerfarben === */
  --color-secondary: #d97706; /* Sekundaerer Akzent (z. B. CTA, Highlights) - Kontrast zu #ffffff: 3.2:1 */
  --color-secondary-rgb: 217 119 6;
  --color-secondary-rgba: rgba(217, 119, 6, 1);
  --color-secondary-dark: #92400e; /* Hover- oder Fokuszustand der Sekundaerfarbe - Kontrast zu #ffffff: 7.1:1 */
  --color-secondary-dark-rgb: 146 64 14;
  --color-secondary-dark-rgba: rgba(146, 64, 14, 1);
  /* === Rahmenfarbe === */
  --color-border: #ccc; /* Farbe fuer Border */
  --color-border-rgb: 204 204 204;
  --color-border-rgba: rgba(204, 204, 204, 1);
  /* === Verlauf und Boxschatten === */
  --verlauf-one: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(37, 99, 235, 0.08) 100%);
  --shadow-one: 0 8px 24px rgba(0, 95, 163, 0.08);
  --font-base: "Roboto", Arial, sans-serif; /* Globale Schrift */
  --form-font: "Roboto", Arial, sans-serif; /* Schriftart fuer Formulare */
  --font-size-sm: clamp(12px, 11.6px + 0.13vw, 14px); /* sehr klein, Meta, Labels */
  --font-size-base: clamp(14px, 13.2px + 0.25vw, 18px); /* Standard-Body */
  --font-size-md: clamp(16px, 15.6px + 0.13vw, 18px); /* kleiner Heading / h6 */
  --font-size-lg: clamp(18px, 17px + 0.3vw, 22px); /* h5/h4 */
  --font-size-xl: clamp(22px, 20px + 0.6vw, 30px); /* h3/h2 */
  --font-size-xxl: clamp(28px, 24px + 1vw, 40px); /* h1 / Hero */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --border-radius: 3px;
  --header-max-width: 1920px;
  --container-max: 1920px;
  --outside-desktop: 32px;
  --outside-mobile: 12px;
  --footer-max-width: 1920px;
  --header-height: 100px;
  --header-height-scroll: 60px;
  --header-z: 1000;
  --body-width-min: 340px;
  --nav-width-mobile: 100%;
  --logo-max-height: 100px;
  --logo-max-medium: 50px;
  --logo-max-small:25px;
  --hero-max-width: 1600px;
  --hero-img-max-height: 480px;
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease-in-out;
  --transition-slow: all 0.6s ease;
  --form-gap: 15px;
}

/* ===================================
   Fonts
=================================== */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/roboto-v32-latin-regular.woff2") format("woff2"), url("assets/fonts/roboto-v32-latin-regular.ttf") format("truetype");
}
/* ===================================
   Reset & Basics
=================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--color-bg-site);
  opacity: 0.97;
  z-index: -1;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg-site) url("/wp-content/themes/androva/assets/img/background.svg") no-repeat center center fixed;
  background-size: auto 1600px;
}

@media (max-width: 480px) {
  body {
    background-size: auto 600px;
  }
}
@media (max-width: 768px) {
  body {
    padding-top: var(--header-height-scroll);
    background-size: auto 800px;
  }
}
@media (max-width: 1024px) {
  body {
    background-size: auto 1000px;
  }
}
@media (max-width: 1280px) {
  body {
    background-size: auto 1200px;
  }
}
@media (max-width: 1440px) {
  body {
    background-size: auto 1400px;
  }
}
@media (min-width: 1920px) {
  body {
    background-size: auto 1800px;
  }
}
/* ===================================
   Helper
=================================== */
#spacer {
  padding: 150px 0;
}

#spacer-single {
  padding-top: 150px;
}

@media (max-width: 1280px) {
  #spacer {
    padding: 75px 0 10px 0;
  }
  #spacer-single {
    padding-top: 75px;
  }
}
@media (max-width: 1024px) {
  #spacer {
    padding: 16px 0 0 0;
  }
  #spacer-single {
    padding-top: 16px;
  }
}
@media (max-width: 480px) {
  #spacer {
    padding: 16px 0;
  }
  #spacer-single {
    padding-top: 16px;
  }
}
.comment-meta .comment-hash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5em;
  padding: 0px 5px;
  border-top: 1px solid var(--color-secondary);
  border-bottom: 1px solid var(--color-secondary);
  font-size: 16px;
}

/* ===================================
   Typografie
=================================== */
p {
  padding: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
}

a {
  position: relative;
  color: #004a94;
  text-decoration: none;
  transition: color 0.3s ease;
}

.entry-content a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #004a94, #d97706);
  transition: var(--transition-base);
  transform: translateX(-50%);
}

a:hover {
  color: var(--color-secondary-dark);
}

a:hover::after {
  width: 100%;
}

.dse-nav a::after {
  content: none;
}

h1 {
  margin: 1em 0 0.25em;
  font-size: var(--font-size-xxl);
  line-height: 1.2;
  color: var(--color-primary);
}

h2 {
  margin: 1em 0 0.25em;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  color: var(--color-primary);
}

h3 {
  margin: 1em 0 0.25em;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

h4 {
  margin: 1em 0 0.25em;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

h5 {
  margin: 1em 0 0.25em;
  font-size: var(--font-size-md);
  color: var(--color-secondary);
}

h6 {
  margin: 1em 0 0.25em;
  font-size: var(--font-size-md);
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   2. Layout - Struktur und Container
   -------------------------------------------------------------------------- */
/* ===================================
   Header
=================================== */
:root {
  --brand-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --brand-color: #111;
  --muted-color: #667085;
  --gap: 0.75rem;
  --logo-max-h-desktop: 64px;
  --logo-max-h-mobile: 44px;
  --logo-max-h-compact: 40px;
  --transition-fast: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.site-header {
  position: fixed;
  inset: 0 auto auto 0; /* shorthand für top/left/right */
  z-index: var(--header-z);
  width: 100%;
  color: var(--color-white);
  background: var(--color-bg-site);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
  transition: var(--transition-base);
}

.header-inner {
  position: relative;
  display: flex;
  max-width: var(--header-max-width);
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--outside-desktop);
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-base);
}

.logo img,
.site-logo-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  transition: max-height 0.3s ease;
}

.logo img {
  max-height: 50px;
}

.is-scrolled .logo img {
  max-height: var(--logo-max-h-compact);
}

#header.is-scrolled .header-inner {
  height: var(--header-height-scroll);
}

/* Tablet */
@media (max-width: 768px) {
  .logo img {
    width: 190px;
    max-height: var(--logo-max-h-mobile);
  }
  .header-inner {
    height: var(--header-height-scroll);
    padding: 0 var(--space-sm);
  }
  .site-branding {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .site-logo-image {
    max-height: var(--logo-max-h-mobile);
  }
}
/* Mobile */
@media (max-width: 420px) {
  .logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .logo img {
    max-height: 25px;
  }
  .site-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .site-title,
  .site-tagline {
    max-width: 180px;
  }
}
.site-branding {
  display: flex;
  align-items: center;
  gap: var(--gap);
  line-height: 1;
  font-family: var(--brand-font);
  color: var(--brand-color);
  text-rendering: optimizeLegibility;
}

.site-branding.is-scrolled .site-logo-image {
  max-height: var(--logo-max-h-compact);
  transition: max-height var(--transition-fast), transform var(--transition-fast);
  transform-origin: left center;
}

.site-title-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.site-title,
.site-title a {
  display: inline-block;
  font-weight: 700;
  color: var(--brand-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.125rem;
}

.site-tagline {
  margin-top: 0.125rem;
  color: var(--muted-color);
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .site-title {
    font-size: 1.25rem;
  }
  .site-tagline {
    font-size: 0.95rem;
  }
}
.logo.is-scrolled .site-text-logo,
.site-branding.is-scrolled .site-text-logo,
.logo.is-scrolled .site-tagline,
.site-branding.is-scrolled .site-tagline {
  transition: font-size var(--transition-fast), opacity var(--transition-fast);
}

.logo.is-scrolled .site-text-logo {
  font-size: 1rem;
}

.logo.is-scrolled .site-tagline {
  font-size: 0.85rem;
}

.brand-horizontal {
  flex-direction: row;
}

.brand-reverse {
  flex-direction: row-reverse;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-branding.center {
  justify-content: center;
}

.site-branding.full-width {
  width: 100%;
}

/* ===================================
   Main Layout
=================================== */
.layout-wrapper {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--outside-mobile);
}

.layout-wrapper > .main,
.layout-wrapper > aside.sidebar {
  box-sizing: border-box;
  width: 100%;
}

main.main {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  flex-direction: column;
  background: transparent;
}

main.main > article,
main.main > section,
main.main > .comments-area {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 0;
}

.layout-wrapper > .main.page {
  margin-top: 0;
  padding-top: 0;
}

.layout-wrapper > aside.sidebar {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-lg);
  margin: 0;
  background-color: var(--color-muted-bg);
}

.sidebar > section {
  position: static;
  top: auto;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

@media (min-width: 900px) {
  .layout-wrapper {
    box-sizing: border-box;
    padding: var(--outside-desktop);
  }
  .layout-wrapper {
    margin-top: 0px;
  }
  .main:not(.main.hero) {
    margin-top: calc(var(--header-height) + 3px);
  }
}
@media (min-width: 1024px) {
  .layout-wrapper {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--space-xl);
    align-items: start;
  }
  .layout-wrapper.has-sidebar-single.has-sidebar-right {
    grid-template-columns: 2fr 1fr;
  }
  .layout-wrapper.has-sidebar-single.has-sidebar-left {
    grid-template-columns: 1fr 2fr;
  }
  .layout-wrapper > .main {
    box-sizing: border-box;
    grid-column: 1/2;
    width: 100%;
  }
  .layout-wrapper > aside.sidebar {
    margin-top: 90px;
  }
  .layout-wrapper.has-sidebar-single.has-sidebar-right > aside.sidebar {
    box-sizing: border-box;
    grid-column: 2/3;
    grid-row: 1/-1;
    align-self: start;
    min-width: 0;
  }
  .layout-wrapper.has-sidebar-single.has-sidebar-left > aside.sidebar {
    box-sizing: border-box;
    grid-column: 1/2;
    grid-row: 1/-1;
    align-self: start;
    min-width: 0;
  }
  .layout-wrapper:not(.has-sidebar-single) > .main {
    grid-column: 1/-1;
  }
  .sidebar > section {
    position: sticky;
    top: calc(var(--header-height) + var(--space-sm));
  }
}
@media (min-width: 900px) {
  body.page .main {
    margin-top: 0;
    padding-top: 0;
  }
  body.page .layout-wrapper {
    margin-top: 0;
    padding-top: 0;
  }
}
/* ===================================
   Footer
   =================================== */
.androva_footer {
  box-sizing: border-box;
  margin-top: auto;
  background: linear-gradient(180deg, var(--color-bg-dark), var(--color-bg-dark));
  color: var(--color-white);
  padding: var(--space-xxl) var(--outside-desktop) var(--space-lg);
  font-family: var(--font-base);
  font-size: var(--font-size-base, 16px);
  line-height: 1.45;
  font-weight: 400;
}

.androva_grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  gap: var(--space-lg);
  align-items: start;
  text-align: center;
}

.androva_col {
  padding: var(--space-md) 0;
}

.androva_col--logos {
  display: flex;
  flex-wrap: nowrap; /* kein Umbruch, Logos bleiben nebeneinander */
  gap: var(--space-md); /* Abstand zwischen Logos */
  align-items: flex-start; /* Logos oben ausrichten */
  justify-content: center; /* Logos mittig nebeneinander */
  flex-direction: row; /* horizontale Anordnung */
  flex-wrap: wrap; /* falls Viewport extrem schmal, dürfen sie umbrechen */
}

.androva_title {
  flex-basis: 100%; /* Überschrift nimmt volle Breite */
  margin-bottom: var(--space-sm);
  text-align: center; /* optional mittig */
}

.androva_figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}

.androva_logo_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  border-radius: var(--border-radius);
  background: rgb(255, 255, 255);
  text-decoration: none;
  transition: var(--transition-base);
  box-shadow: var(--shadow-one);
  overflow: hidden;
  flex: 0 0 auto;
  max-width: 100px;
}

.androva_logo_link:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(255, 255, 255, 0.1);
}

.androva_logo_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.androva_logo_img[style*=border] {
  border: 1px solid white;
}

.androva_caption {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-white);
  opacity: 0.75;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

.androva_divider {
  width: 1px;
  justify-self: center;
  align-self: center;
  height: 50%;
  background: linear-gradient(180deg, rgb(var(--color-secondary-rgb)/0.75), rgb(var(--color-secondary-rgb)/0.25));
  border-radius: 1px;
  margin: 0;
}

.androva_title {
  margin: 0 0 var(--space-lg) 0;
  color: var(--color-white);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  letter-spacing: 4px;
}

.androva_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.androva_footer li {
  font-size: var(--font-size-sm);
}

.androva_bottom {
  margin-top: var(--space-lg);
}

.androva_list a {
  display: inline-block;
  min-width: 160px;
  padding: 6px var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
  border-inline: 2px solid transparent;
  border-radius: var(--border-radius);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.androva_list a:hover,
.androva_list a:focus-visible {
  border-inline-color: var(--color-secondary);
  background: rgb(var(--color-secondary-rgb)/0.04);
  color: color-mix(in srgb, var(--color-text) 85%, black 15%);
  outline: none;
}

.androva_list a:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--color-secondary-rgb)/0.12);
}

.androva_list .current-menu-item > a,
.androva_list .current_page_item > a {
  border-inline-color: var(--color-secondary);
  background: rgb(var(--color-secondary-rgb)/0.06);
  color: color-mix(in srgb, var(--color-text) 80%, black 20%);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .androva_list a {
    transition: none;
    transform: none;
  }
}
.androva_bottom-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xs) 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
}

.androva_bottom-inner small {
  color: rgba(255, 255, 255, 0.5);
}

.androva_bottom-inner small::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--color-secondary);
  margin: 0 0.5rem;
  transform: rotate(35deg);
  vertical-align: middle;
}

.androva_footer,
.androva_col,
.androva_title,
.androva_list a,
.androva_contact,
.androva_copy,
.androva_legal-link {
  color: var(--color-white) !important;
}

.androva_muted {
  color: var(--color-muted);
}

.androva_link:focus-visible,
.androva_logo_link:focus-visible,
.androva_cta:focus-visible,
.androva_legal-link:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 95, 163, 0.12);
  border-radius: 8px;
}

@media (min-width: 480px) and (max-width: 960px) {
  .androva_footer {
    padding: var(--outside-desktop) var(--space-md);
  }
  .androva_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nav contact" "resources logos" "cta cta";
    gap: var(--space-md);
    align-items: start;
  }
  .androva_divider {
    display: none;
  }
  .androva_col--nav {
    grid-area: nav;
  }
  .androva_col--contact {
    grid-area: contact;
  }
  .androva_col--resources {
    grid-area: resources;
  }
  .androva_col--logos {
    grid-area: logos;
    justify-content: center;
    padding-top: var(--space-sm);
  }
  .androva_cta-wrap {
    grid-area: cta;
    display: flex;
    justify-content: center;
    padding-top: var(--space-md);
  }
  .androva_cta {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
  .androva_logo_link {
    width: 88px;
    height: 88px;
  }
  .androva_bottom-inner {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
  .androva_col {
    padding: calc(var(--space-sm) / 2) 0;
  }
}
@media (max-width: 479px) {
  .androva_footer {
    padding: var(--space-xxl) 0;
  }
  .androva_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "resources" "logos" "cta";
    gap: var(--space-md);
  }
  .androva_divider {
    display: none;
  }
  .androva_col--nav {
    grid-area: nav;
  }
  .androva_col--resources {
    grid-area: resources;
  }
  .androva_col--logos {
    grid-area: logos;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
  }
  .androva_cta-wrap {
    grid-area: cta;
    display: flex;
    justify-content: center;
    padding-top: var(--space-sm);
  }
  .androva_cta {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
  .androva_logo_link {
    width: 88px;
    height: 88px;
  }
  .androva_bottom-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
@media (max-width: 360px) {
  .androva_logo_link {
    width: 64px;
    height: 64px;
  }
  .androva_caption {
    font-size: calc(var(--font-size-sm) - 1px);
  }
  .androva_title {
    font-size: calc(var(--font-size-md) - 1px);
  }
}
.mwl-heart {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  color: var(--color-secondary, #ff5a5f);
  transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
  animation: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite mwl-pulse;
}

@keyframes mwl-pulse {
  0%, 18%, 36%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.28);
  }
  30% {
    transform: scale(1.12);
  }
}
@media (max-width: 768px) {
  .mwl-heart {
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media (max-width: 420px) {
  .mwl-heart {
    width: 1.35rem;
    height: 1.35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mwl-heart,
  .mwl-heart * {
    animation: none !important;
    transition: none !important;
  }
}
.social-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.social-item {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.social-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-item:hover {
  transform: translateY(-3px);
  transition: transform 0.18s ease;
}

.uberblog .btn {
  border: 2px solid transparent;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  outline: none;
  padding: var(--space-sm);
  letter-spacing: 1.5px;
}

.uberblog .btn:hover,
.uberblog .btn:focus-visible {
  border-inline-color: var(--color-secondary);
  background: rgb(var(--color-secondary-rgb)/0.04);
  color: color-mix(in srgb, var(--color-white) 100%, white 100%);
  outline: none;
}

/* ===================================
   Sidebar
=================================== */
@media (min-width: 1024px) {
  .container > .sidebar {
    width: auto;
    min-width: 320px;
    max-width: 380px;
    order: 2;
    flex: 1 1 0%;
  }
  .sidebar > section {
    position: sticky;
    top: calc(var(--header-height) + var(--space-sm));
  }
}
/* --------------------------------------------------------------------------
   3. Components - UI-Komponenten
   -------------------------------------------------------------------------- */
/* ===================================
   Navigation (Desktop)
=================================== */
.main-nav ul {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
  background: 0 0;
}

.main-nav a {
  display: flex;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-md);
}

.main-nav li {
  position: relative;
}

.main-nav a::before {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -3px;
  width: calc(100% - 0px);
  height: 2px;
  background-color: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: center;
  transition: var(--transition-base);
}

.current_page_item a::before,
.main-nav a:hover::before {
  transform: scaleX(1);
}

.main-nav a:hover {
  color: var(--color-primary);
}

body.single-post .current_page_parent > a {
  position: relative;
}

body.single-post .current_page_parent > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--color-secondary);
  transform: scaleX(1);
  transform-origin: center;
  transition: var(--transition-base);
  pointer-events: none;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  width: 32px;
  height: 28px;
  display: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.nav-toggle-label span,
.nav-toggle-label::after,
.nav-toggle-label::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 3px;
  background: var(--color-bg-dark);
  border-radius: var(--border-radius);
  transform: translateX(-50%);
  transition: var(--transition-base);
}

.nav-toggle-label span {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-label::before {
  top: var(--space-xxs);
}

.nav-toggle-label::after {
  bottom: var(--space-xxs);
}

.nav-toggle:checked + .nav-toggle-label span {
  opacity: 0;
}

.nav-toggle:checked + .nav-toggle-label::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label::after {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle-label {
    display: block;
  }
  .main-nav a::before {
    display: none;
  }
  .main-nav {
    position: absolute;
    top: var(--header-height-scroll);
    right: 0;
    width: var(--nav-width-mobile);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
  }
  .main-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-bg-site);
  }
  .main-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid var(--color-muted);
    padding-left: var(--space-lg);
    text-decoration: none;
  }
  .main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 50px;
    padding: 0 var(--space-md);
    text-decoration: none;
  }
  .main-nav li:first-child a {
    border-top: 1px solid var(--color-primary);
  }
  .main-nav li:last-child a {
    border-bottom: 1px solid var(--color-muted);
  }
  .nav-toggle:checked ~ .main-nav {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===================================
   Buttons
=================================== */
button,
input[type=submit],
input[type=reset],
input[type=button],
button[type=submit],
.form-submit .submit,
.pagination .page-numbers,
.btn,
.wp-block-button__link,
.wp-element-button,
.search-submit {
  display: inline-block;
  align-self: flex-start;
  box-sizing: border-box;
  width: auto;
  padding: var(--space-xs) var(--space-md);
  height: 35px;
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  text-align: center;
  text-decoration: none;
  color: var(--color-primary);
  background: var(--color-white);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 2px;
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-toggle svg {
  margin-right: var(--space-xs);
}

.primary,
button.primary,
input[type=submit].primary,
.btn.primary,
.wp-block-button__link.primary,
.wp-element-button.primary {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
.pagination .page-numbers:hover,
.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.search-submit:hover,
.primary:hover {
  background: var(--color-btn-hover);
  filter: brightness(0.95);
  color: var(--color-primary);
}

input[type=submit] {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary-dark);
}

input[type=reset] {
  background: var(--color-btn-hover);
  color: var(--color-text);
}

input[type=reset]:hover {
  background: var(--color-muted-bg);
}

input[type=checkbox],
input[type=radio] {
  margin-right: var(--space-xs);
  accent-color: var(--color-primary);
}

@media (max-width: 520px) {
  input[type=submit],
  input[type=reset] {
    margin-bottom: var(--space-sm);
  }
}
.search-submit {
  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

.search-submit.primary,
.search-submit.primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  :where(button,
  input[type=submit],
  input[type=reset],
  .btn,
  .search-submit) {
    transition: none;
  }
}
/* ===================================
   Cards
=================================== */
.cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 2rem 0;
}

.card {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--color-border);
  transition: var(--transition-base);
}

.card:hover {
  box-shadow: 0px 0px 18px 0px var(--color-border);
}

.card-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 3px solid var(--color-secondary);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
}

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
  transition: var(--transition-slow);
}

.card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-md);
}

.card-title {
  font-size: var(--font-size-lg);
  margin-top: var(--space-xs);
}

.card-title a {
  color: #111;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card-title a:hover {
  color: var(--color-primary, #0073aa);
}

.card-meta {
  color: #777;
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-xs) 0;
}

.card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
  margin: var(--space-sm) 0;
  color: #444;
}

.card-content .btn {
  margin-top: auto;
}

@media (max-width: 1280px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .card {
    border-radius: 0;
  }
  .cards {
    grid-template-columns: 1fr;
  }
}
/* ===================================
   Fieldset
=================================== */
fieldset {
  position: relative;
  margin: var(--space-md) 0 var(--space-lg);
  padding: calc(var(--space-md) + 0.25rem) var(--space-md) var(--space-md);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.03);
  background: linear-gradient(180deg, var(--color-white), var(--color-muted-bg));
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--border-radius);
  overflow: visible;
}

fieldset::before {
  content: "";
  display: block;
  height: calc(var(--space-md) * 0.45);
}

fieldset > legend:focus,
fieldset > legend:focus-within,
legend[aria-inline=true]:focus {
  border-radius: var(--border-radius);
  outline: 3px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  outline-offset: 3px;
}

fieldset > legend {
  position: absolute;
  top: -0.6rem;
  left: var(--space-md);
  z-index: 2;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--border-radius);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

fieldset > legend[aria-inline=true],
legend[aria-inline=true] {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  padding: 0.12rem 0.4rem;
  font-weight: 600;
  font-family: var(--font-base);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: transparent;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: var(--border-radius);
  box-shadow: none;
}

@media (max-width: 520px) {
  fieldset {
    padding: calc(var(--space-sm) + 0.2rem) var(--space-sm) var(--space-sm);
  }
  fieldset::before {
    height: calc(var(--space-md) * 0.35);
  }
  fieldset > legend {
    top: -0.5rem;
    padding: 0.18rem 0.6rem;
    font-size: calc(var(--font-size-sm) - 1px);
  }
  fieldset > legend[aria-inline=true] {
    padding: 0.12rem 0.45rem;
    font-size: calc(var(--font-size-sm) - 1px);
  }
}
/* ===================================
   Forms
=================================== */
form {
  box-sizing: border-box;
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
}

form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-xxs);
  color: var(--color-text);
}

input,
textarea,
select {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: var(--border-radius);
  font-family: var(--font-base);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  transition: var(--transition-base);
}

textarea {
  box-sizing: border-box;
  min-height: 120px;
  padding-top: var(--space-xs);
  resize: vertical;
  line-height: 1.5;
}

select {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: calc(var(--space-lg) + 8px);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1rem) center, calc(100% - 0.75rem) center;
  background-size: 0.45em 0.45em, 0.45em 0.45em;
  background-repeat: no-repeat;
}

input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=sear]):not([type=search]):hover,
textarea:hover,
select:hover {
  box-sizing: border-box;
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(0, 95, 163, 0.06), inset 0 -3px 0 #004a94;
}

input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=search]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-sizing: border-box;
  border-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(0, 95, 163, 0.08), inset 0 -2px 0 #004a94;
  z-index: 1;
}

input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=search]):focus,
textarea:focus,
select:focus {
  box-sizing: border-box;
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(0, 95, 163, 0.06), inset 0 -2px 0 #004a94;
  z-index: 1;
}

input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=search]):active,
textarea:active,
select:active {
  box-sizing: border-box;
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 95, 163, 0.06), inset 0 -1px 0 #004a94;
}

.androva-form-row-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.androva-form-row-3 p {
  margin: 0;
}

.form-submit {
  margin-top: 25px;
}

@media (min-width: 480px) and (max-width: 900px) {
  .androva-form-row-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "author email" "url url";
  }
  .comment-form-author {
    grid-area: author;
  }
  .comment-form-email {
    grid-area: email;
  }
  .comment-form-url {
    grid-area: url;
  }
}
@media (min-width: 800px) {
  .androva-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "author email url";
  }
}
.comment-list {
  margin: 0 auto;
  max-width: 860px;
  padding: 0;
  list-style: none;
}

#respond h3 {
  margin-top: var(--space-xxxl);
}

.comments-title {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  margin-top: var(--space-xxxl);
  margin-bottom: var(--space-xxxl);
}

.comment-respond {
  max-width: 1200px;
  margin: 0 auto;
}

.comment-list ol,
.comment-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .comment-list {
    margin: 0;
    max-width: none;
  }
}
.comment-body {
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  margin-bottom: 1rem;
  color: var(--color-text, #333);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  max-width: 800px;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-text-muted, #666);
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.comment-number {
  font-weight: 600;
  color: var(--color-accent, #0073aa);
}

.comment-author a {
  font-weight: 600;
  color: var(--color-text, #333);
  text-decoration: none;
}

.comment-time-link time {
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
}

.comment-hash {
  margin-left: auto;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--color-accent, #0073aa);
}

.comment-content {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.comment-actions {
  margin-top: 1rem;
}

.inline-respond {
  margin-top: 1rem;
}

.inline-respond label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}

.inline-respond form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.inline-respond textarea,
.inline-respond input[type=text],
.inline-respond input[type=email],
.inline-respond input[type=url] {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
}

.inline-respond .form-submit {
  margin: 0;
}

@media (min-width: 480px) and (max-width: 900px) {
  .inline-respond form {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "comment comment" "author email" "url url" "submit submit";
  }
  .comment-form-comment {
    grid-area: comment;
  }
  .comment-form-author {
    grid-area: author;
  }
  .comment-form-email {
    grid-area: email;
  }
  .comment-form-url {
    grid-area: url;
  }
  .form-submit {
    grid-area: submit;
  }
}
@media (min-width: 900px) {
  .inline-respond form {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "comment comment comment" "author email url" "submit submit submit";
  }
  .comment-form-comment {
    grid-area: comment;
  }
  .comment-form-author {
    grid-area: author;
  }
  .comment-form-email {
    grid-area: email;
  }
  .comment-form-url {
    grid-area: url;
  }
  .form-submit {
    grid-area: submit;
  }
}
.comment-awaiting-moderation {
  font-style: italic;
  color: var(--color-secondary);
  margin: 0.5rem 0;
}

.comment-list .children {
  margin-left: var(--space-md);
  border-left: 1px solid var(--color-secondary);
  padding-left: var(--space-md);
}

@media (max-width: 768px) {
  .comment-list .children {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
  }
}
/* ===================================
   Hero Section
=================================== */
.hero {
  box-sizing: border-box;
  width: auto;
  margin-top: calc(var(--header-height) + 3px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-bg-site) 0%, transparent));
  will-change: transform;
}

.hero .container {
  box-sizing: border-box;
  max-width: var(--hero-max-width);
  margin: 0 auto;
  padding: 0 var(--outside-desktop);
  display: flex;
  gap: var(--space-xl);
  align-items: center;
}

.hero-media {
  box-sizing: border-box;
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
}

.hero-image {
  position: relative;
  overflow: visible;
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--hero-img-max-height);
  aspect-ratio: 16/9;
  object-fit: cover;
  box-shadow: var(--shadow-one);
  position: relative;
  z-index: 3;
}

.hero-image::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  right: -30px;
  bottom: -30px;
  pointer-events: none;
  z-index: 3;
  border: 6px solid transparent;
  border-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-border) 50%, var(--color-secondary) 100%) 1;
}

@media (max-width: 1400px) {
  .hero-image::before {
    top: 15px;
    left: 15px;
    right: -15px;
    bottom: -15px;
    z-index: 3;
    border: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-border) 50%, var(--color-secondary) 100%) 1;
  }
}
.hero-content {
  box-sizing: border-box;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  order: 0;
}

.hero-title {
  box-sizing: border-box;
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}

.hero-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  background-color: var(--color-secondary);
  margin: 25px 0 0 0;
}

.hero-title a {
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}

.hero-meta {
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.hero-desc {
  box-sizing: border-box;
  color: var(--color-text);
  font-size: var(--font-size-base);
  margin: var(--space-xs) 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.hero-ctas-wrap {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--space-xs);
}

.hero-ctas {
  box-sizing: border-box;
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

@media (max-width: 900px) {
  .hero .container {
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--outside-mobile);
  }
  .hero-media {
    box-sizing: border-box;
    order: -1;
    width: 100%;
  }
  .hero-content {
    box-sizing: border-box;
    order: 0;
    width: 100%;
  }
  .hero-title {
    box-sizing: border-box;
    font-size: var(--font-size-md);
  }
  .hero-ctas-wrap {
    box-sizing: border-box;
    justify-content: flex-start;
    margin-top: 12px;
  }
  .hero-ctas {
    box-sizing: border-box;
    width: 100%;
    gap: 10px;
  }
}
@media (max-width: 900px) {
  .hero-image::before {
    content: none;
    display: none;
  }
}
@media (max-width: 768px) {
  .hero {
    margin-top: 0;
  }
  .hero-image::before {
    content: none;
    display: none;
  }
}
/* ===================================
   Hero-Single Section
=================================== */
.entry-footer {
  font-size: var(--font-size-lg);
  padding: var(--space-xxxl) 0;
}

.hero-tags {
  max-width: calc(100% - 15px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  position: relative;
}

.hero-tags a {
  padding: 10px 20px;
}

.hero-tags::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}

.hero-tags .tags {
  position: relative;
  background: var(--color-border);
  padding: 0.3em 2em;
  font-size: var(--font-size-base);
  color: var(--color-secondary-dark);
  text-decoration: none;
  z-index: 1;
}

.hero-tags .tags::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  width: 50px;
  height: 50px;
  background: var(--color-primary, #0055a5);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: var(--transition-slow);
}

.hero-tags .tags:hover {
  color: var(--color-secondary-dark);
}

.hero-tags .tags:hover::before {
  transition: var(--transition-slow);
  background: var(--color-secondary);
}

@media (max-width: 1024px) {
  .hero-tags .tags::before {
    display: none;
  }
  .hero-tags a {
    padding: 0;
  }
  .hero-tags .tags {
    display: flex;
    flex-wrap: wrap; /* erlaubt Umbruch */
    gap: 20px;
    padding: 10px 15px;
  }
}
/* ===================================
   Hero-Page Section
=================================== */
.hero .hero-title.page {
  font-size: var(--font-size-xxl);
}

/* ===================================
   Statics Section
=================================== */
.statics .container {
  display: flex;
  flex-direction: column;
}

.statics::after {
  content: "";
  display: block;
  margin-top: 75px;
  height: 3px;
  width: 75px;
  background-color: var(--color-secondary);
  margin-left: auto;
  margin-right: auto;
}

.statics-items-outer {
  overflow: hidden;
}

.statics-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -2px;
}

.statics-item {
  display: block;
  flex: 1 0 340px;
  border: 1px solid var(--color-border);
  text-decoration: none;
}

.statics-item:hover {
  background-color: var(--color-border);
  transition: var(--transition-slow);
}

.statics-item-icon-container {
  width: 80px;
  height: 80px;
  border-radius: 99999px;
  background-color: var(--color-secondary);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-md) 0;
  margin-top: var(--space-lg);
}

.statics-item-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-left: auto;
  margin-right: auto;
}

.statics {
  margin-bottom: 100px;
}

.statics-item-heading {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  position: relative;
  display: inline-block;
}

.statics-item-heading::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 3rem;
  background: #ed6a4e;
  margin-left: 0.75rem;
  transform: rotate(35deg);
  vertical-align: middle;
}

.statics-item-count {
  padding: var(--space-lg) 0;
  text-align: center;
}

.statics-item-label {
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.statics-paragraph {
  padding: var(--space-xxl) 0;
}

/* ===================================
   About Me - Section
=================================== */
.aboutme-inner h2 {
  margin: 0;
  padding: 12px 0;
  text-align: left;
}

.aboutme-inner h2::after {
  content: "";
  display: block;
  height: 3px;
  width: 75px;
  background-color: var(--color-secondary);
  margin: 16px 0;
}

.aboutme-leadt-top {
  margin-left: 10%;
}

.aboutme-inner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}

.aboutme-portrait {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.aboutme-portrait-frame {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.aboutme-portrait-shape {
  position: relative;
  overflow: hidden;
}

.aboutme-portrait-shape img {
  object-fit: cover;
  object-position: center bottom; /* gültig */
  width: 100%;
  display: block;
  transform: translateZ(0) scale(1.02);
  filter: grayscale(0.06) contrast(1.03) saturate(0.98);
  transition: transform 0.35s ease, filter 0.35s ease;
  will-change: transform;
}

.aboutme-portrait-shape:hover img,
.aboutme-portrait-shape:focus-within img {
  transform: scale(1.04);
  filter: none;
}

.aboutme-content {
  position: relative;
  padding: 48px;
  overflow: hidden;
}

.aboutme-content > * {
  position: relative;
  z-index: 1;
}

.lead {
  margin: 0 0 16px;
}

.actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: end;
  margin-top: 24px;
}

.aboutme-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  background: transparent;
  overflow: hidden;
}

.aboutme-table thead th {
  text-align: left;
  font-weight: 700;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-secondary);
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.02), transparent);
}

.aboutme-table tbody th {
  text-align: left;
  padding: 12px 0;
  vertical-align: top;
  width: 28%;
  font-weight: 600;
  border-bottom: 1px solid silver;
}

.aboutme-table td {
  padding: 12px 0;
  border-bottom: 1px solid silver;
}

.aboutme-table td ul.compact {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 980px) {
  .aboutme-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .aboutme-portrait-shape {
    aspect-ratio: 16/9;
    width: 100%;
    overflow: hidden; /* wichtig */
  }
  .aboutme-portrait-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
}
@media (max-width: 720px) {
  .aboutme-table thead {
    display: none;
  }
  .aboutme-table {
    box-shadow: none;
  }
  .aboutme-table tbody tr {
    display: block;
    margin: 0 0 12px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    overflow: hidden;
  }
  .aboutme-table tbody th,
  .aboutme-table tbody td {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-bottom: none;
  }
  .aboutme-table tbody th {
    background: rgba(124, 92, 255, 0.04);
    font-weight: 700;
  }
  .aboutme-table tbody td {
    padding-bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aboutme-portrait-shape img,
  .aboutme-content::before {
    transition: none !important;
    transform: none !important;
  }
}
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ===================================
   Icon-Basics
=================================== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: visible;
  vertical-align: middle;
  fill: currentColor;
}

.icon--sm {
  width: 0.75em;
  height: 0.75em;
}

.icon--lg {
  width: 1.5em;
  height: 1.5em;
}

.icon--xl {
  width: 2em;
  height: 2em;
}

.icon--primary {
  color: #0073e6;
}

.icon--accent {
  color: #ff7900;
}

.icon--muted {
  color: #999;
}

/* ===================================
   Listenelemente
=================================== */
ul,
ol,
dl {
  margin: 1em 0;
  padding-left: 1.5em;
  font-size: 1rem;
  line-height: 1.6;
}

ul.stylish {
  list-style: none;
  padding-left: 0;
}

ul.stylish li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

ul.stylish li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--accent-color, #4cafef);
  font-weight: bold;
}

ul.checklist {
  list-style: none;
  padding-left: 0;
}

ul.checklist li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.5em;
}

ul.checklist li::before {
  content: "x";
  position: absolute;
  left: 0;
  color: #2ecc71;
  font-weight: bold;
}

ol.timeline {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

ol.timeline li {
  counter-increment: step;
  margin-bottom: 1.5em;
  position: relative;
  padding-left: 2.5em;
}

ol.timeline li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--accent-color, #4cafef);
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

dl.stylish {
  margin: 1.5em 0;
  border-left: 3px solid var(--accent-color, #4cafef);
  padding-left: 1em;
}

dl.stylish dt {
  font-weight: bold;
  color: var(--accent-color, #4cafef);
  margin-top: 1em;
}

dl.stylish dd {
  margin: 0 0 1em 0.5em;
  color: #555;
  line-height: 1.5;
}

dl.inline {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5em 1em;
}

dl.inline dt {
  font-weight: bold;
  margin: 0;
}

dl.inline dd {
  margin: 0;
}

@media (max-width: 768px) {
  dl.inline {
    grid-template-columns: 1fr;
  }
  ol.timeline li::before {
    width: 1.5em;
    height: 1.5em;
    font-size: 0.9em;
  }
  ul.stylish li,
  ul.checklist li {
    padding-left: 1.2em;
  }
}
/*


ul,
ol,
dl {
	margin: 1em 0;
	padding-left: 1.5em;
	font-size: 1rem;
	line-height: 1.6;
}

ul.stylish {
	list-style: none;
	padding-left: 0;
}

ul.stylish li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.5em;
}

ul.stylish li::before {
	content: "-";
	position: absolute;
	left: 0;
	color: var(--accent-color, #4cafef);
	font-weight: bold;
}

ul.checklist {
	list-style: none;
	padding-left: 0;
}

ul.checklist li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 0.5em;
}

ul.checklist li::before {
	content: "x";
	position: absolute;
	left: 0;
	color: #2ecc71;
	font-weight: bold;
}

ol.timeline {
	counter-reset: step;
	list-style: none;
	padding-left: 0;
}

ol.timeline li {
	counter-increment: step;
	margin-bottom: 1.5em;
	position: relative;
	padding-left: 2.5em;
}

ol.timeline li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--accent-color, #4cafef);
	color: #fff;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

dl.stylish {
	margin: 1.5em 0;
	border-left: 3px solid var(--accent-color, #4cafef);
	padding-left: 1em;
}

dl.stylish dt {
	font-weight: bold;
	color: var(--accent-color, #4cafef);
	margin-top: 1em;
}

dl.stylish dd {
	margin: 0 0 1em 0.5em;
	color: #555;
	line-height: 1.5;
}

dl.inline {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 0.5em 1em;
}

dl.inline dt {
	font-weight: bold;
	margin: 0;
}

dl.inline dd {
	margin: 0;
}

@media (max-width: 768px) {
	dl.inline {
		grid-template-columns: 1fr;
	}

	ol.timeline li::before {
		width: 1.5em;
		height: 1.5em;
		font-size: 0.9em;
	}

	ul.stylish li,
	ul.checklist li {
		padding-left: 1.2em;
	}
}

*/
/* ===================================
    Pagination
=================================== */
.pagination {
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
}

.pagination .page-numbers.current {
  color: var(--color-white);
  background: var(--color-primary);
  cursor: default;
}

.screen-reader-text {
  display: none;
}

/* ============================
   To Top
============================ */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 48px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--border-radius);
  background: var(--color-muted);
  color: var(--color-secondary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  z-index: 1000;
  transition: var(--transition-slow);
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:hover {
  outline: 0;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  background: var(--color-bg-dark);
}

.to-top__icon {
  width: 175%;
  height: 175%;
  fill: currentColor;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
    transform: none;
  }
}
@media (max-width: 420px) {
  .to-top {
    right: var(--space-md);
    bottom: var(--space-xxxl);
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 1024px) {
  .to-top {
    right: var(--space-lg);
    bottom: 330px;
    width: 52px;
    height: 52px;
  }
}
/* ===================================
   Suche
=================================== */
@media (max-width: 768px) {
  .search-toggle {
    margin: 0 65px 0 25px;
    z-index: -999;
  }
}
.js .search-form {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 300px;
  max-width: 460px;
  background: var(--color-bg-site);
  border-radius: var(--border-radius);
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-one);
  z-index: 60;
  transform-origin: top right;
  opacity: 0;
}

.search-form.is-open {
  display: block;
  opacity: 1;
  margin: 0 var(--space-xl);
}

@media (max-width: 540px) {
  .js .search-form {
    min-width: 300px;
    max-width: auto;
    top: calc(100% + 20px);
  }
}
.search-form .row {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1 1 auto;
  box-sizing: border-box;
  height: 35px;
  padding: 0 var(--space-sm);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text);
  background: var(--color-white);
  border-right: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.search-input:hover {
  background: rgba(217, 119, 6, 0.1019607843);
}

.search-input:focus {
  background: rgba(217, 119, 6, 0.1019607843);
}

.search-form .meta {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  display: flex;
  gap: var(--space-xs);
}

.screen-reader-text {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .search-toggle,
  .search-form,
  .search-form.is-open {
    transition: none;
    transform: none;
  }
}
/* ===================================
   Meta
=================================== */
.post-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.post-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  column-gap: 3px;
}

.post-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.post-meta .meta-item + .meta-item::before {
  content: " ";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.3rem;
  background: currentColor;
  border-radius: 50%;
  vertical-align: middle;
}

.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}

.post-categories a {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  background: var(--color-muted-bg);
  color: var(--color-text);
  border-radius: var(--border-radius);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-primary);
}

.post-categories a:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

@media (max-width: 420px) {
  .post-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
  }
  .post-categories {
    gap: 0.375rem;
  }
  .post-meta .meta-item + .meta-item::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-categories a,
  .post-meta .meta-item {
    transition: none !important;
  }
}
/* ============================
   Post Navigation
============================ */
.post-nav {
  margin: 2rem 0;
}

.post-nav__inner {
  display: flex;
  gap: 1rem;
}

.post-nav__item {
  flex: 1 1 0;
  min-width: 0;
}

.post-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  text-decoration: none;
  background: #f7f9fc;
  color: #0f1720;
  border: 1px solid var(--color-border);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}

.post-nav__label {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.post-nav__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  word-break: break-word;
}

.post-nav__link:hover,
.post-nav__link:focus {
  transition: var(--transition-fast);
  box-shadow: 15px 15px 40px var(--color-border);
  outline: none;
}

.post-nav__item--prev .post-nav__link {
  text-align: left;
}

.post-nav__item--next .post-nav__link {
  text-align: right;
  align-items: flex-end;
}

.post-nav__empty {
  display: block;
  height: 100%;
  width: 100%;
  background: transparent;
}

.post-nav__link:focus-visible {
  box-shadow: 0 0 0 4px rgba(31, 142, 241, 0.1);
}

@media (max-width: 660px) {
  .post-nav__inner {
    flex-direction: column;
  }
  .post-nav__item--next .post-nav__link,
  .post-nav__item--prev .post-nav__link {
    text-align: left;
    align-items: flex-start;
  }
  .post-nav__text {
    margin: 0 var(--space-sm);
  }
}
.post-nav__inner {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.keycap_side {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: var(--space-xl);
}

.keycap_side.prev {
  border-right: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.keycap_side.next {
  border-left: 1px solid var(--color-border);
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.keycap {
  font-family: monospace;
  font-size: 1.5em;
}

.post-nav__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em 0;
}

.post-nav__label {
  font-size: 0.85em;
  color: #666;
}

.post-nav__title {
  font-weight: 600;
  color: #111;
  margin-top: 0.5em;
}

.post-nav__link:hover .keycap_side,
.post-nav__link:focus .keycap_side {
  background: var(--color-secondary);
  color: #fff;
  transition: var(--transition-base);
}

@media (max-width: 660px) {
  .keycap_side {
    display: none;
  }
}
/* ===================================
   Main Content
=================================== */
.no-single {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 0;
}

/* ============================
   Related Posts
============================ */
.relatad-posts {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.relatad-posts__heading {
  margin: 0 0 24px;
  font-weight: 700;
  line-height: 1.15;
}

.relatad-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.relatad-posts__item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--rp-bg));
  border: 1px solid var(--rp-border);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 220ms ease, border-color 160ms ease;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.relatad-posts__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
  width: 100%;
}

.relatad-posts__thumb {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.relatad-posts__thumb--img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.relatad-posts__thumb--img .relatad-posts__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.relatad-posts__thumb--placeholder {
  background-color: #efefef;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.02) 50%);
  background-size: 14px 14px;
}

.relatad-posts__meta {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
}

@media (max-width: 980px) {
  .relatad-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .relatad-posts__item {
    min-height: 240px;
  }
}
@media (max-width: 560px) {
  .relatad-posts__grid {
    grid-template-columns: 1fr;
  }
  .relatad-posts__thumb {
    padding-bottom: 62%;
  }
  .relatad-posts__meta {
    padding: 0.85rem;
  }
  .relatad-posts__title {
    -webkit-line-clamp: 2;
  }
}
.relatad-posts__thumb,
.relatad-posts__thumb--placeholder,
.relatad-posts__thumb--img,
.relatad-posts__img {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  min-height: 56px !important;
}

@media (prefers-reduced-motion: reduce) {
  .relatad-posts__item,
  .relatad-posts__link {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}
/* ===================================
   Lightbox
=================================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px #000;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
}

.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.wp-block-gallery.has-nested-images {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-gallery.columns-default {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.wp-block-gallery.is-cropped img {
  object-fit: cover;
}

.wp-block-gallery.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* ===================================
   Changelog Box
=================================== */
.changelog {
  font-family: "Inter", "Segoe UI", sans-serif;
  color: #222;
}

.changelog h1,
.changelog p,
.changelog hr:nth-of-type(1) {
  display: none;
}

.changelog h2 {
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
}

.changelog h3 {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  margin-bottom: 0;
  margin-top: 0;
  margin-left: var(--space-md);
}

.changelog ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.changelog li {
  margin: 0;
  padding: 0.25rem 1em;
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--border-radius);
}

.changelog blockquote {
  border-left: 4px solid #999;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #555;
  background: #f5f5f5;
  border-radius: 4px;
}

.changelog table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.changelog th,
.changelog td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.changelog tr:last-child td {
  border-bottom: none;
}

.changelog hr:nth-of-type(2) {
  margin-top: 50px;
}

.changelog code {
  background: #eee;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: "Fira Code", monospace;
  color: #d93025;
}

.changelog-layout {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.changelog h2[id] {
  scroll-margin-top: 100px;
}

/* ===================================
   Formular
=================================== */
:root {
  --color-text: #1e1e1e;
  --color-muted: #4c566a;
  --color-bg-light: #f1f3f5;
  --color-white: #ffffff;
  --color-primary: #004a94;
  --color-border: #cfcfcf;
  --color-border-rgb: 204 204 204;
  --color-primary-rgb: 0 74 148;
  --color-muted-rgb: 76 86 106;
  --font-base: "Roboto", Arial, sans-serif;
  --form-font: "Roboto", Arial, sans-serif;
  --font-size-sm: clamp(12px, 11.6px + 0.13vw, 14px);
  --font-size-base: clamp(14px, 13.2px + 0.25vw, 18px);
  --font-size-md: clamp(16px, 15.6px + 0.13vw, 18px);
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --border-radius: 8px;
  --shadow-one: 0 10px 30px rgba(0, 74, 148, 0.06);
}

.pc-contact-form,
.pc-contact-form * {
  box-sizing: border-box;
  font-family: var(--form-font, var(--font-base));
  color: var(--color-text);
}

.pc-contact-form {
  width: 100%;
  border: 1px solid rgba(var(--color-border-rgb), 1);
  margin-top: 25px;
}

.pc-row {
  margin-bottom: var(--space-sm);
}

.pc-contact-form label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.25;
}

.pc-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pc-contact-form input[type=text],
.pc-contact-form input[type=email],
.pc-contact-form textarea {
  width: 100%;
  padding: calc(var(--space-sm) + 6px) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.06s ease;
  min-height: 44px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.pc-contact-form ::placeholder {
  color: rgba(var(--color-muted-rgb), 0.45);
}

.pc-contact-form textarea {
  min-height: 160px;
  resize: vertical;
  padding-top: calc(var(--space-sm) + 8px);
  padding-bottom: calc(var(--space-sm) + 8px);
}

.pc-contact-form input:focus,
.pc-contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 8px 30px rgba(var(--color-primary-rgb), 0.08);
}

.pc-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

.pc-name-row.fallback-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.pc-name-row.fallback-grid > :nth-child(1),
.pc-name-row.fallback-grid > :nth-child(2) {
  grid-column: 1;
}

.pc-name-row.fallback-grid > :nth-child(3),
.pc-name-row.fallback-grid > :nth-child(4) {
  grid-column: 2;
}

.pc-privacy-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.pc-privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
  user-select: none;
}

.pc-privacy input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
  border: 1px solid rgba(var(--color-border-rgb), 0.95);
  background: var(--color-white);
  display: inline-block;
  vertical-align: middle;
}

.pc-privacy-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.pc-contact-form input[aria-invalid=true],
.pc-contact-form textarea[aria-invalid=true] {
  border-color: #d9534f; /* rot für Fehler */
  box-shadow: 0 8px 30px rgba(217, 83, 79, 0.06);
}

.pc-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (max-width: 640px) {
  .pc-name-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}
.pc-qa {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

.pc-qa-question {
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: rgba(var(--color-bg-light-rgb), 0.6);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(var(--color-border-rgb), 0.9);
}

#pc_qa_answer {
  min-width: 140px;
  padding: calc(var(--space-sm) + 4px) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius) * 0.9);
  font-size: var(--font-size-base);
}

#pc_qa_answer:focus {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.06);
}

.pc-qa-error {
  color: #d9534f;
  font-size: var(--font-size-sm);
  margin-top: 8px;
  display: none;
}

.pc-field.pc-error input,
.pc-field.pc-error textarea,
.pc-field.pc-error select {
  border-color: #d9534f;
  box-shadow: 0 6px 20px rgba(217, 83, 79, 0.08);
  background: #fff7f6;
  transform: translateY(-1px);
}

.pc-field.pc-error label {
  color: #b02a37;
}

.pc-error-message {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  color: #d9534f;
  min-height: 1.2em;
  display: block;
}

.pc-field.pc-error input:focus,
.pc-field.pc-error textarea:focus {
  outline: 3px solid rgba(217, 83, 79, 0.12);
  outline-offset: 2px;
}

.pc-privacy-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.pc-privacy-row .pc-error-message {
  margin-left: calc(var(--space-md) + 4px);
}

.pc-contact-form input,
.pc-contact-form textarea,
.pc-contact-form select {
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, transform 0.06s ease;
}

.pc-success {
  background: lightgreen;
  padding: 25px;
  margin: 25px 0;
}

/* ===================================
   Foo Gallery Anpassungen
=================================== */
.foogallery-album-gallery-list h3 {
  font-size: 1em;
  font-weight: normal;
}

.foogallery-album-gallery-list h3 span {
  font-size: 0.75em !important;
}

.fg-paging-container .fg-page-item .fg-page-link {
  border: 1px solid #cccccc !important;
  font-size: 1em !important;
  color: #404040 !important;
  background: none !important;
  padding: 10px 15px !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  margin: 0 2px !important;
}

.fg-page-link .fg-visible {
  font-weight: bolder !important;
}

.fg-page-item.fg-selected .fg-page-link,
.fg-paging-container.fg-light .fg-page-item:focus .fg-page-link,
.fg-paging-container.fg-light .fg-page-item:hover .fg-page-link {
  color: #fff !important;
  background: #004a94 !important;
}

.fg-paging-container a::after,
.foogallery-pile a::after,
.foogallery-album-header a::after {
  content: none !important;
}

.fg-media-caption-exif-value {
  margin-top: 5px;
}

.fg-media-caption-description {
  font-size: 1.2em;
}

.fg-media-caption-exif-value,
.fg-media-caption-exif-label {
  font-size: 1em !important;
  margin-left: 20px;
}

.fg-media-caption-exif svg {
  height: 32px !important;
  width: 32px !important;
  color: #e57731 !important;
}

.fg-media-caption-exif-full .fg-media-caption-exif-label,
.fg-panel.fg-large .fg-media-caption-exif-auto .fg-media-caption-exif-label {
  opacity: 0.75;
}

@media (max-width: 800px) {
  .fg-media-caption-exif-prop {
    margin: 0px 10px;
  }
  .fg-media-caption-title {
    font-size: 1.2em !important;
  }
  .fg-media-caption-exif svg {
    height: 24px !important;
    width: 24px !important;
  }
  .fg-media-caption-exif {
    margin-bottom: 5px !important;
  }
}
.fg-media-caption-description + .fg-media-caption-exif {
  border: none;
}

.foogallery-album-gallery-list .foogallery-pile h3 {
  opacity: 0.85 !important;
}

.foogallery-album-header {
  margin-bottom: 15px;
}

.fg-panel-thumb-spacer,
.fg-media-caption-title {
  border: none !important;
  font-size: 1.3em;
}

.fg-media-caption-exif {
  margin-bottom: 25px;
}

.fg-paging-container {
  margin-top: 25px !important;
}

.fg-ph-pagination {
  display: none;
}

.foogallery-album-header {
  display: none;
}

.comeback {
  margin-top: 50px;
}

.foogallery-album-gallery-list .foogallery-pile img {
  max-height: 367px;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.fg-exif-bottom-left .fg-item.fg-item-exif .fg-image-wrap:after,
.fg-exif-bottom-right .fg-item.fg-item-exif .fg-image-wrap:after,
.fg-exif-top-left .fg-item.fg-item-exif .fg-image-wrap:after,
.fg-exif-top-right .fg-item.fg-item-exif .fg-image-wrap:after {
  content: "EXIF";
  font-size: 12px;
  line-height: 12px;
  padding: 5px 10px;
  background-color: #e57731;
}

.gal-meta .title {
  font-size: 1.75rem;
  margin: 0;
  padding: 5px 0px 10px 0px;
}

.gal-meta .raw {
  font-size: 0.9rem;
  color: grey;
  margin: 0;
}

.gal-meta .raw::before {
  content: "Negativ-ID: ";
}

.foogallery.fg-caption-hover.fg-hover-fade .fg-loaded .fg-caption,
.foogallery.fg-hover-fade .fg-loaded .fg-image-overlay {
  margin-bottom: 0 !important;
}

@media (min-width: 800px) {
  .fg-media-caption-exif-prop {
    padding: 7px 14px;
  }
}
@media (max-width: 1024px) {
  .foogallery-album-gallery-list li {
    flex: 0 calc(50% - 10px);
  }
}
@media (max-width: 620px) {
  .foogallery-album-gallery-list li {
    flex: 0 calc(100% - 10px);
  }
}
/* --------------------------------------------------------------------------
   4. Core-Elements - Block-spezifische Styles
   -------------------------------------------------------------------------- */
/* ===================================
   Code-Block
=================================== */
code {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 1em;
  line-height: 1.4;
}

pre.wp-block-code {
  background-color: rgba(111, 111, 111, 0.25);
  border-left: 3px solid var(--color-secondary);
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  border-radius: 0;
  margin: 15px 0px;
  position: relative;
  padding: 48px 16px 16px 16px;
}

pre.wp-block-code[title] {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: auto;
  padding: 48px 16px 16px 16px;
  font-size: 1em;
  line-height: 1.4;
  font-family: Consolas, Monaco, "Courier New", monospace;
}

pre.wp-block-code.with-line-numbers code {
  display: block;
}

pre.wp-block-code.with-line-numbers .line {
  display: grid;
  grid-template-columns: 3em auto;
}

pre.wp-block-code.with-line-numbers .line-number {
  text-align: right;
  padding-right: 16px;
  color: #ff0000;
  user-select: none;
}

pre.wp-block-code.with-line-numbers .line-code {
  white-space: pre;
}

pre.wp-block-code.with-line-numbers .line:nth-child(even) {
  background-color: #e5e5e5;
}

pre.wp-block-code.with-line-numbers .line:nth-child(odd) {
  background-color: #f3f3f3;
}

pre.wp-block-code[title]::before {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 16px;
  font-weight: bold;
  font-size: var(--font-size-md);
  color: var(--color-text);
  background-color: #ffffff;
}

pre.wp-block-code[title=Quellcode]::before {
  content: "Quellcode";
  border-right: 10px solid rgb(111, 111, 111);
}

pre.wp-block-code[title=Quellcode] {
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
  padding: 48px 0 0 0;
  font-size: var(--font-size-sm);
}

pre.wp-block-code[title=Standard]::before {
  content: "Standard";
  border-right: 10px solid rgb(255, 255, 255);
}

pre.wp-block-code[title=Standard] {
  background-color: rgba(255, 255, 255, 0.5);
}

pre.wp-block-code[title=Tipp]::before {
  content: "Tipp";
  border-right: 10px solid rgb(0, 204, 102);
}

pre.wp-block-code[title=Tipp] {
  background-color: rgba(0, 204, 102, 0.25);
}

pre.wp-block-code[title=Hinweis]::before {
  content: "Hinweis";
  border-right: 10px solid rgb(50, 153, 255);
}

pre.wp-block-code[title=Hinweis] {
  background-color: rgba(50, 153, 255, 0.25);
}

pre.wp-block-code[title=Warnung]::before {
  content: "Warnung";
  border-right: 10px solid rgb(255, 153, 0);
}

pre.wp-block-code[title=Warnung] {
  background-color: rgba(255, 153, 0, 0.25);
}

pre.wp-block-code[title=Achtung]::before {
  content: "Achtung";
  border-right: 10px solid rgb(204, 51, 0);
}

pre.wp-block-code[title=Achtung] {
  background-color: rgba(204, 51, 0, 0.25);
}

.copy-code-wrapper {
  text-align: right;
  margin-bottom: var(--space-xxl);
}

/* ===================================
   Images
=================================== */
.wp-block-image {
  margin: 1em auto;
  text-align: center;
  max-width: 100%;
}

.wp-block-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-image figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: var(--color-text, #666);
  text-align: center;
}

/* ============================
   Table
============================ */
.wp-block-table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  margin-top: 2rem;
}

.wp-block-table thead {
  border-bottom: 2px solid #e5e7eb;
}

.wp-block-table tfoot {
  border-top: 2px solid #e5e7eb;
}

.wp-block-table tfoot th,
.wp-block-table tfoot td {
  font-weight: 600;
  background: #f9fafb;
}

.wp-block-table th {
  text-align: left;
  min-width: 80px;
}

.wp-block-table th,
.wp-block-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.wp-block-table thead th {
  background: #f0f2f5;
  font-weight: 600;
  color: #333;
}

.wp-block-table th:first-child,
.wp-block-table td:first-child {
  white-space: nowrap;
  padding-right: 20px;
}

.wp-block-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.wp-block-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.wp-block-table tbody tr:hover {
  background: #eef2f7;
}

.wp-block-table .wp-element-caption {
  font-size: 0.85rem;
  color: #6b7280;
  text-align: right;
  padding: 12px;
  display: block;
}

.theme-hello-block {
  padding: 1rem;
  border: 2px solid #333;
  background: #f0f0f0;
  font-weight: bold;
}

.uberblog {
  margin-top: 25px;
}



@media (max-width: 420px) {

  .site-search {
  display: flex;
  align-items: center;
  justify-content: flex-end; 
  pointer-events: auto; 
}


  .site-search button {
  position: relative;
  z-index: 9999;
}

}