/*
Theme Name: GoingElectric 2026
Theme URI: https://goingelectric.de
Description: A modern, accessible Material Design WordPress theme optimized for SEO
Version: 1.0.0
Author: GoingElectric
Author URI: https://goingelectric.de
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ge2026
Tags: material-design, accessibility-ready, custom-colors, custom-menu, featured-images, responsive-layout, seo-optimized

This theme is built with modern web standards and accessibility in mind.
*/

/* Base styles */
:root {
  /* Material Design color palette with improved contrast */
  --primary-color: #0851a4; /*#1976D2*/
  --primary-rgb: 8, 81, 164; /* keep in sync with --primary-color, used for rgba() tints */
  --primary-dark: #1565C0;
  --primary-light: #BBDEFB;
  --secondary-color: #006064;
  --accent-color: #C2185B;
  --error-color: #B71C1C;
  --warning-color: #E65100;
  --success-color: #1B5E20;
  /* PHEV / plug-in hybrid indicator color, used in stats sections (Zulassungszahlen, etc.) */
  --plugin-color: #388E3C;
  --plugin-rgb: 56, 142, 60;
  --text-primary: rgba(0, 0, 0, 0.95);
  --text-secondary: rgba(0, 0, 0, 0.70);
  --text-disabled: rgba(0, 0, 0, 0.38);
  --divider-color: rgba(0, 0, 0, 0.12);
  --surface-color: #FFFFFF;
  --background-color: #F5F5F5;
  --card-elevation: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  --card-elevation-hover: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
  --menu-text-color: #FFFFFF;

  /* Spacing scale (shared with forum theme) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-smd: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* UI primitives */
  --border-radius: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --border-color: rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --bg-secondary: #FAFAFA;
  --transition-short: 0.2s ease;
}

body {
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.featured-image,
.post-thumbnail img,
.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Featured image container - full width */
.post-thumbnail.featured-image-container {
  width: 100%;
  overflow: hidden;
}

.post-thumbnail.featured-image-container img,
.featured-image-container img,
.featured-image-container .featured-image,
.card .post-thumbnail.featured-image-container img,
.card .featured-image-container img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
  border-radius: 0; /* Remove border-radius for full-width images */
  position: static !important; /* Override absolute positioning */
  left: auto !important; /* Remove left offset */
  top: auto !important; /* Remove top offset */
}

/* Images are mobile-first optimized by default - no override needed */

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

.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
  padding: 0.75rem 1.5rem;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100000;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Mobile-first base styles */
.site-header {
  position: relative;
  z-index: 1001;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background: var(--primary-color);
  min-height: 48px;
}

.site-branding {
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px 24px;
  display: none; /* Mobile-first: hidden by default */
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  min-height: 68px;
}

/* Old .menu-toggle removed - now using mega menu */

/* Page container */
#page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Header inner container */
.header-inner {
  width: 100%;
  padding: 0 12px; /* Mobile-first: smaller padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, var(--primary-color), #0ba4ec);
  min-height: 48px; /* Mobile-first: smaller height */
  position: relative;
  box-sizing: border-box;
  z-index: 1002; /* Ensure header stays above menu container */
}

.site-title {
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  color: var(--primary-color);
  text-align: left;
  padding: 0 24px 0 0;
}

.site-title a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-title a:hover {
  color: var(--primary-dark);
}

.site-description {
  color: var(--primary-color);
  opacity: 0.87;
  margin: 0.5rem 0 0;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  padding: 0 24px;
}

/* Mobile site title base styling - Mobile-first: shown by default */
.mobile-site-title {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.mobile-site-title a {
  font-size: 24px;
  font-weight: 700;
  color: var(--menu-text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-site-title a:hover {
  color: var(--menu-text-color);
  opacity: 0.8;
}

.main-navigation .nav-container {
  width: 100%;
  padding: 0; /* Mobile-first: no padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-navigation {
  margin-left: auto; /* Mobile-first: push to right */
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  margin-right: auto;
}

/* Hide submenu items */
.main-navigation ul ul {
  display: none;
}

.main-navigation a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.25px;
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 4px;
  display: block;
  white-space: nowrap;
}

.main-navigation a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #FFFFFF;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-50%);
}

.main-navigation a:hover {
  color: #FFFFFF;
  opacity: 0.85; /* Slightly reduced opacity for hover */
}

.main-navigation a:hover::after {
  width: 100%;
  opacity: 1;
}

.main-navigation .menu-link-disabled {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.25px;
  padding: 8px 4px;
  display: block;
  white-space: nowrap;
  cursor: default;
}

/* Search Container */
.search-container {
  position: relative;
  margin-left: 8px;
  display: none; /* Hidden on mobile */
  align-items: center;
  justify-content: center;
}

.search-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.search-toggle {
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  z-index: 2;
  line-height: 1;
  vertical-align: middle;
}

.search-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.search-toggle svg {
  width: 20px;
  height: 20px;
  stroke: #FFFFFF; /* Explicit white color to match mega-menu-toggle */
  fill: none;
  display: block;
  margin: auto;
}

.search-form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  width: 0;
  transition: all 0.3s ease;
  background: transparent;
  z-index: 1;
}

/* Hide search toggle when search form is open */
.search-toggle-checkbox:checked ~ .search-toggle,
.search-container:has(.search-form:focus-within) .search-toggle {
  opacity: 0;
  visibility: hidden;
}

/* Show search form when checkbox is checked or form has focus */
.search-toggle-checkbox:checked ~ .search-form,
.search-form:focus-within {
  opacity: 1;
  visibility: visible;
  width: 200px;
}

.search-field {
  width: 100%;
  height: 36px;
  padding: 0 40px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  font-size: 16px;
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease;
  outline: none;
}

.search-field:focus {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

.search-field::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-submit {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* Close icon (X) should be dark when search field has white background */
.search-submit .close-icon {
  color: rgba(0, 0, 0, 0.6); /* Dark color for white background */
  stroke: rgba(0, 0, 0, 0.6);
}

.search-submit:hover .close-icon {
  color: rgba(0, 0, 0, 0.8); /* Darker on hover */
  stroke: rgba(0, 0, 0, 0.8);
}

.search-submit:hover {
  background: none;
  background-color: transparent;
  color: #FFFFFF;
}

.search-submit:hover .search-icon {
  color: #FFFFFF; /* Keep search icon white on hover */
}

.search-submit svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Hide search icon and show X icon when search form is open */
.search-toggle-checkbox:checked ~ .search-form .search-submit .search-icon,
.search-form:focus-within .search-submit .search-icon {
  display: none;
}

.search-toggle-checkbox:checked ~ .search-form .search-submit .close-icon,
.search-form:focus-within .search-submit .close-icon {
  display: block;
}

/* Hide X icon by default */
.search-submit .close-icon {
  display: none;
}

/* Show search icon by default */
.search-submit .search-icon {
  display: block;
}

/* Suppress transitions during dark-mode toggle for instant switch */
html.dark-mode-transitioning *,
html.dark-mode-transitioning *::before,
html.dark-mode-transitioning *::after {
  transition: none !important;
}

/* Dark mode styles for search */
.dark-mode .search-field {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .search-field:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* .search-toggle keeps its light-mode white icon in dark mode — it sits on
   the blue .header-inner accent strip, which is blue in both modes. */

.dark-mode .search-submit {
  background: none;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
}

/* Dark mode: close icon should be light on dark background */
.dark-mode .search-submit .close-icon {
  color: rgba(255, 255, 255, 0.7);
  stroke: rgba(255, 255, 255, 0.7);
}

.dark-mode .search-submit:hover .close-icon {
  color: var(--primary-light);
  stroke: var(--primary-light);
}

.dark-mode .search-submit:hover {
  background: none;
  background-color: transparent;
  color: var(--primary-light);
}

/* Content Area */

/* Posts Grid */
.main-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

/* Horizontal list layout - for vertical stacks of horizontal cards */
.main-posts.horizontal-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-posts.horizontal-list .horizontal-card {
  margin-bottom: 0;
}

.main-posts .entry-content {
  padding: 16px 16px 0;
}

.main-posts .entry-content p {
  margin: 0;
}

/* Homepage Featured Post */
body.home .featured-post {
  margin-top: 2rem;
}

body.home .featured-post .card {
  display: flex;
  flex-direction: column;
}

body.home .featured-post .post-thumbnail {
  /*padding-top: 56.25%; /* 16:9 aspect ratio for mobile */
  padding-top: 0;
}

body.home .featured-post .entry-header {
  padding: 16px 16px 0;
}

body.home .featured-post .entry-title {
  font-size: 18px;
  margin: 0 0 8px 0;
}

/* Cards */
.card,
.special-card,
.compact-card {
  position: relative;
  background-color: var(--surface-color);
  border-radius: 4px;
  box-shadow: var(--card-elevation);
  overflow: hidden;
  margin-bottom: 0;
  transition: box-shadow 0.3s, transform 0.3s;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card .post-thumbnail,
.special-card .post-thumbnail {
  position: relative;
  padding-top: 0;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.card .post-thumbnail img,
.special-card .post-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}


/* Comments Counter Styles */
.comments-counter {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
  backdrop-filter: blur(4px);
  transition: background-color 0.2s ease;
}

.comments-counter:hover {
  background: rgba(0, 0, 0, 0.8);
}

.comments-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.comments-count svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Dark mode styles for comments counter */
.dark-mode .comments-counter {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.dark-mode .comments-counter:hover {
  background: rgba(255, 255, 255, 0.3);
}

.card .entry-header,
.special-card .entry-header,
.compact-card .entry-header {
  padding: 1rem;
}

.card .entry-title,
.special-card .entry-title,
.compact-card .entry-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.card .entry-title a,
.special-card .entry-title a,
.compact-card .entry-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.card .entry-title a:hover,
.special-card .entry-title a:hover,
.compact-card .entry-title a:hover {
  color: var(--primary-color);
}

.card .entry-meta {
  font-size: 14px;
  color: var(--text-secondary);
}

.card .entry-content,
.special-card .entry-content,
.compact-card .entry-content {
  padding: 0 1rem 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card .entry-content p,
.special-card .entry-content p,
.compact-card .entry-content p {
  margin: 0 0 10px;
}

.card .entry-footer,
.special-card .entry-footer,
.compact-card .entry-footer {
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.card .entry-footer a,
.special-card .entry-footer a,
.compact-card .entry-footer a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--border-radius, 4px);
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.card .entry-footer a:hover,
.special-card .entry-footer a:hover,
.compact-card .entry-footer a:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

/* Single-post tag chips (outside .card scope on single posts) */
.tags-links a,
.entry-footer .tags-links a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--border-radius, 4px);
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  margin-right: 4px;
}
.tags-links a:hover,
.entry-footer .tags-links a:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}
.dark-mode .tags-links a,
.dark-mode .entry-footer .tags-links a {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
.dark-mode .tags-links a:hover,
.dark-mode .entry-footer .tags-links a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

/* Buttons — .read-more compact variant; main .button/.btn defined at ~line 5030 */
.read-more {
  background-color: var(--primary-color);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 64px;
}

.read-more:hover {
  background-color: var(--primary-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  text-decoration: none;
  color: #FFFFFF;
}

/* =====================================================
   HORIZONTAL CARD COMPONENT
   Generic reusable horizontal layout card
   ===================================================== */

.horizontal-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
  position: relative;
  background-color: var(--surface-color);
  border-radius: 4px;
  box-shadow: var(--card-elevation);
  margin-bottom: 1rem;
  transition: box-shadow 0.3s;
}

.horizontal-card:hover {
  box-shadow: var(--card-elevation-hover);
}

.horizontal-card-content {
  flex: 1;
  min-width: 0;
  padding: 1rem 1rem 0;
}

.horizontal-card-title {
  margin-bottom: 0.5rem;
}

.horizontal-card-title a {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
}

.horizontal-card-title a:hover {
  color: var(--primary-color);
}

.horizontal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.horizontal-card-summary {
  margin-top: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.horizontal-card-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  position: static;
  transform: none;
  padding: 0 1rem 1rem;
}

.date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  background-color: var(--primary-light);
  color: var(--primary-color);
  line-height: 1;
  text-align: center;
}

.date-badge-day {
  display: block;
  font-size: 24px;
  font-weight: 700;
}

.date-badge-month {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dark-mode .date-badge {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--primary-light);
}

@media (min-width: 769px) {
  .horizontal-card {
    flex-direction: row;
    align-items: center;
  }

  .horizontal-card-content {
    padding: 1rem;
  }

  .horizontal-card-action {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    padding: 0;
  }

  .horizontal-card.has-date-badge .horizontal-card-content {
    padding-right: 8rem;
  }
}

/* Simple list items (used inside card containers) */
.item-list {
  padding: 0;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.list-item-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.list-item-title a:hover {
  color: var(--primary-color);
}

.list-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Dark Mode Toggle - Header */
.dark-mode-toggle-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark Mode Toggle in site-branding (top bar) */
.site-branding .dark-mode-toggle-container {
  margin-left: auto;
  margin-right: -15px;
  margin-top: -4px;
}

.site-branding .dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.site-branding .dark-mode-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.site-branding .dark-mode-toggle:active {
  transform: scale(0.95);
}

.site-branding .dark-mode-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  stroke: var(--primary-color);
  fill: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.dark-mode .site-branding .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .site-branding .dark-mode-icon {
  stroke: var(--primary-light);
}

/* Dark Mode Toggle in header-inner (for mobile/other locations) */
.header-inner .dark-mode-toggle-container {
  margin-left: 8px;
  display: none; /* Hidden on mobile - footer has dark mode toggle */
}

.header-inner .dark-mode-toggle {
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.header-inner .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.header-inner .dark-mode-toggle:active {
  transform: scale(0.95);
}

.header-inner .dark-mode-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  stroke: #FFFFFF;
  fill: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.dark-mode-icon.sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.dark-mode-icon.moon-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

/* Dark mode: show moon, hide sun */
.dark-mode .dark-mode-icon.sun-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}

.dark-mode .dark-mode-icon.moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Dark Mode Toggle - Footer (matches site-branding style) */
.site-footer .dark-mode-toggle-container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.site-footer .dark-mode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.site-footer .dark-mode-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.site-footer .dark-mode-toggle:active {
  transform: scale(0.95);
}

.site-footer .dark-mode-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  stroke: var(--primary-color);
  fill: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.dark-mode .site-footer .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .site-footer .dark-mode-icon {
  stroke: var(--primary-light);
}

/* Site Footer */
.site-footer {
  background-color: var(--surface-color);
}

.site-footer > .site-info {
  text-align: center;
}

.site-footer .footer-content {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.site-footer .copyright {
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding-bottom: 1rem;
}

/* Footer Link Categories */
.footer-link-categories {
  padding: 2rem 0;
  border-top: 1px solid var(--divider-color);
  border-bottom: 1px solid var(--divider-color);
  margin: 2rem 0 1rem 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr; /* Mobile-first: single column */
  gap: 2rem;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 1rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.footer-column-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--divider-color);
}

.footer-column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-column-list li {
  margin: 0;
}

.footer-column-list a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  transition: all 0.2s;
}

.footer-column-list a:hover {
  color: var(--primary-color);
  padding-left: 0.5rem;
}

.footer-link-disabled {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.9rem;
  padding: 0.25rem 0;
  cursor: default;
}

/* Footer Social Media & Legal */
.footer-social-legal {
  padding: 1rem 0;
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.footer-social {
  text-align: center;
}

.footer-social-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.footer-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-social-list li {
  margin: 0;
}

.footer-social-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.footer-social-list a:hover {
  color: var(--primary-color);
  background-color: rgba(0, 0, 0, 0.05);
}

.footer-social-list svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-legal {
  text-align: center;
}

.footer-legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-legal-list li {
  margin: 0;
}

.footer-legal-list a,
.footer-legal-list .footer-legal-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  transition: all 0.2s;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.footer-legal-list a:hover,
.footer-legal-list .footer-legal-link:hover {
  color: var(--primary-color);
}

/* Footer link-styled button (for cookie settings etc.) */

/* Responsive Footer - Mobile-first base styles already set above */

/* Dark Mode Styles - Consolidated */
.dark-mode {
  --background-color: #121212;
  --surface-color: #1E1E1E;
  --primary-color: #1565C0;
  --primary-rgb: 21, 101, 192; /* keep in sync with --primary-color */
  --primary-dark: #0D47A1;
  --primary-light: #64B5F6;
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-disabled: rgba(255, 255, 255, 0.38);
  --divider-color: rgba(255, 255, 255, 0.12);
  --menu-text-color: #FFFFFF;
  --border-color: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --bg-secondary: #252525;
  /* Lighter PHEV green so it stays readable on the dark background */
  --plugin-color: #66BB6A;
  --plugin-rgb: 102, 187, 106;
}

.dark-mode .card,
.dark-mode .special-card,
.dark-mode .compact-card {
  background-color: var(--surface-color);
}

.dark-mode .card .entry-footer a,
.dark-mode .special-card .entry-footer a,
.dark-mode .compact-card .entry-footer a {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.dark-mode .card .entry-footer a:hover,
.dark-mode .special-card .entry-footer a:hover,
.dark-mode .compact-card .entry-footer a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.dark-mode .card .entry-title a:hover,
.dark-mode .special-card .entry-title a:hover,
.dark-mode .compact-card .entry-title a:hover {
  color: var(--primary-light);
}

.dark-mode .search-field {
  background-color: var(--surface-color);
  color: var(--text-primary);
  border-color: var(--divider-color);
}

.dark-mode .search-field:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.dark-mode .site-footer {
  background-color: var(--surface-color);
  border-top-color: var(--divider-color);
}

/* Dark mode for footer columns */
.dark-mode .footer-link-categories {
  border-top-color: var(--divider-color);
  border-bottom-color: var(--divider-color);
}

.dark-mode .footer-column-title {
  color: var(--text-primary);
  border-bottom-color: var(--divider-color);
}

.dark-mode .footer-column-list a {
  color: var(--text-secondary);
}

.dark-mode .footer-column-list a:hover {
  color: var(--primary-light);
}

/* Dark mode for footer social & legal */
.dark-mode .footer-social-legal {
  border-bottom-color: var(--divider-color);
}

.dark-mode .footer-social-title {
  color: var(--text-primary);
}

.dark-mode .footer-social-list a {
  color: var(--text-secondary);
}

.dark-mode .footer-social-list a:hover {
  color: var(--primary-light);
  background-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .footer-legal-list a,
.dark-mode .footer-legal-list .footer-legal-link {
  color: var(--text-secondary);
}

.dark-mode .footer-legal-list a:hover,
.dark-mode .footer-legal-list .footer-legal-link:hover {
  color: var(--primary-light);
}

.dark-mode a {
  color: var(--primary-light);
}

.dark-mode a:hover {
  color: var(--text-primary);
}

/* Mobile site title on the blue header gradient stays white in dark mode —
   the generic .dark-mode a would otherwise recolour it to primary-light,
   which is nearly invisible on the blue nav. Specificity (0,2,1) beats
   .dark-mode a (0,1,1). */
.dark-mode .mobile-site-title a,
.dark-mode .mobile-site-title a:hover {
  color: var(--menu-text-color);
}

.dark-mode .url.fn.n {
  color: var(--primary-light);
}

.dark-mode .url.fn.n:hover {
  color: var(--text-primary);
}

.dark-mode .entry-meta a {
  color: var(--primary-light);
}

.dark-mode .entry-meta a:hover {
  color: var(--text-primary);
}

.dark-mode .button,
.dark-mode .read-more {
  background: transparent;
  color: var(--primary-light);
  border: 1px solid var(--primary-light);
}

.dark-mode .button:hover,
.dark-mode .read-more:hover {
  background: rgba(100, 181, 246, 0.12);
}

.dark-mode .page-numbers.current {
  background-color: var(--surface-color);
  color: white;
}

.dark-mode .page-numbers:not(.current):hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .special-card .button {
  background: transparent;
  color: var(--primary-light);
  border: 1px solid var(--primary-light);
}

.dark-mode .special-card .button:hover {
  background: rgba(100, 181, 246, 0.12);
}

/* dark-mode .post-navigation overrides moved to the post-navigation block below */

.dark-mode .site-header {
  background-color: var(--surface-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.dark-mode .site-branding {
  background-color: var(--surface-color); /* Material Design 3 surface container */
  border-bottom-color: rgba(255, 255, 255, 0.12); /* Dark mode divider */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6); /* Enhanced shadow for dark mode */
}

.dark-mode .site-title a {
  color: var(--text-primary);
}

/* .header-inner intentionally keeps its light-mode blue gradient in dark mode
   to provide a blue accent strip. Text inside stays white as in light mode. */

.dark-mode .mega-menu-dropdown {
  background-color: var(--surface-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.dark-mode .mega-menu-close {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.dark-mode .mega-menu-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .mega-menu-featured {
  border-bottom-color: var(--divider-color);
}

.dark-mode .mega-menu-featured-links a {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .mega-menu-featured-links a:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Dark mode for three-column mega menu */
.dark-mode .mega-menu-column-title {
  color: var(--text-primary);
  border-bottom-color: var(--primary-light);
}

.dark-mode .mega-menu-column-list a {
  color: var(--text-secondary);
}

.dark-mode .mega-menu-link-disabled,
.dark-mode .footer-link-disabled {
  color: var(--text-tertiary);
}

.dark-mode .mega-menu-column-list a:hover {
  color: var(--primary-light);
}

.dark-mode .new-badge {
  background-color: var(--primary-color);
  color: var(--text-primary);
}

.dark-mode .mega-menu-column-list a:hover .new-badge {
  background-color: var(--primary-dark);
}

/* Universal tag/link styles for custom app cards (garage, zulassungszahlen, etc.) */
.card .entry-footer .cat-links a,
.card .entry-footer .comments-link a,
.card .entry-footer .tag-links a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--border-radius, 4px);
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.card .entry-footer .cat-links a:hover,
.card .entry-footer .comments-link a:hover,
.card .entry-footer .tag-links a:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

/* Dark mode for card tags */
.dark-mode .card .entry-footer .cat-links a,
.dark-mode .card .entry-footer .comments-link a,
.dark-mode .card .entry-footer .tag-links a {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.dark-mode .card .entry-footer .cat-links a:hover,
.dark-mode .card .entry-footer .comments-link a:hover,
.dark-mode .card .entry-footer .tag-links a:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}


/* Dark mode styles for billboard ad */
.dark-mode .billboard-ad {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .billboard-ad .ad-label {
    color: rgba(255, 255, 255, 0.4);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  border-radius: 18px;
  background-color: transparent;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

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

.page-numbers:not(.current):hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Special Cards */
.special-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0;
}

.special-card {
    background-color: var(--surface-color);
    border-radius: 4px;
    box-shadow: var(--card-elevation);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.special-card:hover {
    box-shadow: var(--card-elevation-hover);
    transform: translateY(-2px);
}

.special-card .entry-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--divider-color);
}

.special-card .entry-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.special-card .entry-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.special-card .entry-title a:hover {
    color: var(--primary-color);
}

.special-card .entry-content {
    padding: 1.5rem;
    flex-grow: 1;
}

.special-card .entry-content p {
    margin: 0;
    color: var(--text-secondary);
}

.special-card .entry-footer {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    justify-content: flex-start;
}

.special-card .button {
    background-color: var(--primary-color);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 64px;
}

.special-card .button:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-decoration: none;
    color: var(--text-primary);
}

/* Community Question Styles */
#community_question {
  margin: 2rem 0;
  padding: 1rem;
  background: var(--background-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
}

#community_question .question-icon {
  font-size: 4rem;
  color: #666;
  line-height: 1;
}

#community_question .question-text {
  flex: 1;
}

/* Simple Image Lightbox Styles */
#simple-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#simple-lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.simple-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

#simple-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

#simple-lightbox-image.fading {
    opacity: 0;
}

#simple-lightbox-overlay.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lb-spin 0.8s linear infinite;
    z-index: 5;
}

@keyframes lb-spin {
    to { transform: rotate(360deg); }
}

/* Shared spinner rotation — used by .file-upload-spinner and other loading indicators across sections */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.simple-lightbox-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.simple-lightbox-close:hover,
.simple-lightbox-close:focus-visible {
    background: rgba(0, 0, 0, 0.8);
}

/* Lightbox navigation buttons */
.simple-lightbox-prev,
.simple-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    z-index: 10;
    transition: all 0.3s ease;
}

.simple-lightbox-prev:hover,
.simple-lightbox-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.simple-lightbox-prev {
    left: 20px;
}

.simple-lightbox-next {
    right: 20px;
}

.simple-lightbox-prev:disabled,
.simple-lightbox-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Lightbox counter */
.simple-lightbox-counter {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    z-index: 11;
}

a[href*=".jpg"],
a[href*=".jpeg"],
a[href*=".png"],
a[href*=".gif"],
a[href*=".webp"],
.thumbnail a,
.inline-attachment a,
.carousel-slide a,
.location-photo > a,
.upload-preview-item > a,
.photo-gallery a,
.attach-image img.postimage,
.file img.postimage {
    cursor: zoom-in;
}

/* Dark mode lightbox */
.dark-mode .simple-lightbox-prev,
.dark-mode .simple-lightbox-next {
    background: rgba(45, 45, 45, 0.9);
    color: var(--text-primary);
}

.dark-mode .simple-lightbox-prev:hover,
.dark-mode .simple-lightbox-next:hover {
    background: var(--surface-color);
}

/* Billboard Ad Styles */
.billboard-ad {
    width: 100%;
    max-width: 300px;
    height: 250px;
    margin: 2rem auto;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 4px;
    grid-column: 1 / -1; /* Span all columns in grid */
}

.billboard-ad .ad-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Was #999 — 2.61:1 on the #f5f5f5 ad container, failed Lighthouse.
       --text-secondary clears 4.5:1 and still reads as muted. */
    color: var(--text-secondary);
}

.main-posts .billboard-ad {
    margin: 0;
}

/* In-content ad wrappers used by the_content filters in inc/template-functions.php.
   .a_1 wraps the <!--more--> replacement (ge2026_ads_instead_of_more).
   .a_inline wraps mid-article ads between <h2> sections (ge2026_ads_middle_content).
   Capped at 336px so the wrapper hugs the 336×280 medium rectangle AdSense
   typically serves in this slot (a wider wrapper sat with ~400px of empty
   horizontal space when AdSense fell back from a 970×250 billboard that
   wouldn't fit the article column). Height stays at 280 across all breakpoints
   to match the medium rectangle creative. Scoped to .entry-content so
   .a_1/.a_inline placements outside articles keep their full-width sizing. */
/* In-article ad wrappers (.a_1 / .a_inline inside .entry-content). Height
   is uncapped at every breakpoint so a tall native / fluid AdSense creative
   pushes the following paragraph DOWN instead of being overlapped by the
   overflowing iframe (the earlier fixed-height + overflow:visible combo
   caused exactly that visual breakout). AdSense's auto-optimize-unfilled
   inline `height: auto !important; min-height: 0 !important` would beat any
   stylesheet pin anyway, so we lean into the variable-height behavior. CLS
   impact is small because the slot sits below the initial fold for most
   readers (outside Lighthouse's headless viewport, and outside the CrUX
   window unless they're mid-scroll). */
.entry-content .a_1,
.entry-content .a_inline {
    position: relative;
    width: 100%;
    max-width: 336px;
    height: auto;
    min-height: 280px;
    max-height: none;
    margin: 1rem auto 0.5rem;
}
.entry-content .a_1 ins.adsbygoogle,
.entry-content .a_inline ins.adsbygoogle {
    min-height: 280px;
}

/* Desktop ≥992: widen the slot to roughly the article column width. */
@media (min-width: 992px) {
    .entry-content .a_1,
    .entry-content .a_inline {
        max-width: 782px;
    }
    .entry-content .a_1 ins.adsbygoogle,
    .entry-content .a_inline ins.adsbygoogle {
        min-height: 90px;
    }
}


/* Mobile: Hide primary-menu-container (using mega menu instead) */
.primary-menu-container {
    display: none;
}

/* Desktop Mega Menu */
.mega-menu-toggle {
    display: flex; /* Show on all devices */
    background: transparent;
    border: none;
    color: var(--text-primary); /* White icon to match search icon */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 8px;
    border-radius: 50%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
}

.mega-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.mega-menu-toggle:active {
    transform: scale(0.95);
}

.mega-menu-toggle svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF; /* Explicit white color to match search-toggle */
    fill: none;
    display: block;
    margin: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-toggle .mega-menu-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
    fill: none;
    display: block;
    margin: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-toggle .hamburger-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.mega-menu-toggle .close-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

/* When mega menu is expanded: show close, hide hamburger */
.mega-menu-toggle[aria-expanded="true"] .hamburger-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

.mega-menu-toggle[aria-expanded="true"] .close-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* .mega-menu-toggle keeps its light-mode white icon in dark mode — it sits on
   the blue .header-inner accent strip, which is blue in both modes. */

/* Mega Menu Overlay - Not needed since menu covers full viewport on mobile */
.mega-menu-overlay {
    display: none !important; /* Disabled - menu covers full screen */
}

/* Mega Menu Dropdown — top is set dynamically by JS based on actual header height */
.mega-menu-dropdown {
    position: fixed;
    top: 48px; /* Fallback, overridden by JS */
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    background-color: var(--surface-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    padding: 0 12px;
    box-sizing: border-box;
}

.mega-menu-dropdown.active {
    max-height: calc(100vh - 48px); /* Fallback for mobile */
    opacity: 1;
    overflow-y: auto;
}

.mega-menu-container {
    padding: 1rem 0; /* Remove horizontal padding since dropdown has it */
    position: relative;
}

/* Mega Menu Search Wrapper - Contains search input */
.mega-menu-search-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--divider-color);
}

/* Mega Menu Search */
.mega-menu-search {
    display: block;
    flex: 1; /* Take remaining space */
    padding: 0;
    margin: 0;
}

.mega-menu-search .search-form {
    position: static;
    opacity: 1;
    visibility: visible;
    width: 100%;
    transform: none;
    display: block;
}

.mega-menu-search .search-field {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--divider-color);
    border-radius: 22px;
    font-size: 16px;
    color: var(--text-primary);
    background-color: var(--surface-color);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.mega-menu-search .search-field::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.mega-menu-search .search-field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
    outline: none;
}

/* Dark mode for mega menu search */
.dark-mode .mega-menu-search .search-field {
    background-color: var(--surface-color);
    border-color: var(--divider-color);
    color: var(--text-primary);
}

.dark-mode .mega-menu-search .search-field:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

/* Close Button */
.mega-menu-close {
    position: static; /* Changed from absolute to static for inline layout */
    top: auto;
    right: auto;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: none; /* Hidden by default, shown on mobile via JS */
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 15;
    flex-shrink: 0;
}

.mega-menu-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.mega-menu-close:active {
    transform: rotate(90deg) scale(0.95);
}

/* Dark mode for close button */
.dark-mode .mega-menu-close {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.dark-mode .mega-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.mega-menu-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Close button when it replaces toggle in header */
.header-inner > .mega-menu-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    background: transparent !important;
    border: none;
    color: #FFFFFF !important; /* White icon to match search icon */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 36px !important; /* Same size as mega-menu-toggle */
    height: 36px !important; /* Same size as mega-menu-toggle */
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-left: 8px;
    display: flex;
    z-index: auto;
    line-height: 1;
    vertical-align: middle;
}

.header-inner > .mega-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: none !important;
}

.header-inner > .mega-menu-close svg {
    width: 20px !important; /* Same size as mega-menu-toggle svg */
    height: 20px !important; /* Same size as mega-menu-toggle svg */
    stroke: #FFFFFF; /* Explicit white color to match search-toggle */
    fill: none;
    display: block;
    margin: auto;
}

/* Dark mode for close button in header */
.dark-mode .header-inner > .mega-menu-close {
    background: transparent !important;
    color: var(--primary-light) !important;
}

.dark-mode .header-inner > .mega-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .header-inner > .mega-menu-close svg {
    stroke: var(--primary-light);
}

/* Featured Links Section */
.mega-menu-featured {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--divider-color);
}

.mega-menu-featured h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mega-menu-featured-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.mega-menu-featured-links li {
    margin: 0;
}

.mega-menu-featured-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 24px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mega-menu-featured-links a:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Three Column Mega Menu Layout */
.mega-menu-columns {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 2rem;
    margin-top: 0.5rem;
}

.mega-menu-column {
    display: flex;
    flex-direction: column;
}

.mega-menu-column-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color);
}

.mega-menu-column-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mega-menu-column-list li {
    margin: 0;
}

.mega-menu-column-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.625rem 0;
    transition: all 0.2s ease;
    position: relative;
    width: 100%;
    border-radius: 4px;
}

.mega-menu-column-list a:hover {
    color: var(--primary-color);
    background-color: rgba(25, 118, 210, 0.05);
    padding-left: 0.5rem;
}

.mega-menu-link-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    padding: 0.625rem 0;
    position: relative;
    width: 100%;
    border-radius: 4px;
    cursor: default;
}

.mega-menu-column-list li {
    transition: all 0.2s ease;
}

/* NEW Badge */
.new-badge {
    display: inline-block;
    background-color: #2196F3;
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-left: 0.5rem;
    vertical-align: top;
    flex-shrink: 0;
}

.mega-menu-column-list a:hover .new-badge {
    background-color: var(--primary-color);
    transform: scale(1.05);
}


/* Legacy support: Keep old grid styles for backward compatibility */
.mega-menu-sections {
    margin-top: 1rem;
}

.mega-menu-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.mega-menu-grid > li {
    margin: 0;
    padding: 0;
}

.mega-menu-grid > li > a {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    transition: color 0.2s;
}

.mega-menu-grid > li > a:hover {
    color: var(--primary-color);
}

/* Sub-menu items */
.mega-menu-grid .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-grid .sub-menu li {
    margin: 0 0 0.5rem 0;
}

.mega-menu-grid .sub-menu a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.25rem 0;
    transition: all 0.2s;
}

.mega-menu-grid .sub-menu a:hover {
    color: var(--primary-color);
    padding-left: 0.5rem;
}

/* Placeholder message */
.mega-menu-placeholder {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Utility class: Disable card transitions and hover effects */
.no-card-transition.card,
.no-card-transition .card {
    transition: none !important;
}

.no-card-transition.card:hover,
.no-card-transition .card:hover {
    box-shadow: var(--card-elevation) !important;
    transform: none !important;
}

.no-card-transition.card .post-thumbnail img,
.no-card-transition .card .post-thumbnail img {
    transition: none !important;
}

.no-card-transition.card:hover .post-thumbnail img,
.no-card-transition .card:hover .post-thumbnail img {
    transform: none !important;
}

/* Single post specific styles - uses utility class */
.single-post .card {
    transition: none !important;
}

.single-post .card:hover {
    box-shadow: var(--card-elevation) !important;
    transform: none !important;
}

.single-post .card .post-thumbnail img {
    transition: none !important;
}

.single-post .card:hover .post-thumbnail img {
    transform: none !important;
}

/* Edit view specific styles - uses utility class */
.edit-garage .card {
    transition: none !important;
}

.edit-garage .card:hover {
    box-shadow: var(--card-elevation) !important;
    transform: none !important;
}

.edit-garage .card .post-thumbnail img {
    transition: none !important;
}

.edit-garage .card:hover .post-thumbnail img {
    transform: none !important;
}

/* =====================================================
   UNIVERSAL UTILITIES - Reusable across all apps
   ===================================================== */

/* Progress Bar - Pinned to top of container */
.progress-bar-pinned {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: var(--divider-color);
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.progress-bar-pinned:not([style*="display: none"]) {
    opacity: 1;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.progress-bar-indeterminate {
    height: 100%;
    background: var(--primary-color);
    animation: indeterminate-progress 1.5s infinite linear;
}

.progress-bar-determinate {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

@keyframes indeterminate-progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Dark mode progress bar */
.dark-mode .progress-bar-pinned {
    background: #424242;
}

.dark-mode .progress-bar-fill,
.dark-mode .progress-bar-indeterminate {
    background: var(--primary-light);
}

/* Universal Button System */
/* NOTE: Base .btn, .btn-primary, .btn-danger defined in canonical button block below (~line 4366) */

.btn-icon {
    background: #f5f5f5;
    border: 1px solid var(--border-color);
    color: #424242;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: none;
}

.btn-icon:hover {
    background: #eeeeee;
    border-color: #bdbdbd;
}

.btn-icon-danger {
    background: none;
    border: none;
    font-size: 16px;
    padding: 4px 8px;
    opacity: 0.7;
    box-shadow: none;
}

.btn-icon-danger:hover {
    opacity: 1;
    background: rgba(211, 47, 47, 0.1);
    transform: none;
}

.btn-small, .btn-sm, .button-small {
    padding: 6px 16px;
    font-size: 13px;
}
.btn-sm.btn-secondary, .btn-sm.btn-danger {
    padding: 5px 15px;
}

/* Medium button variant — fits 32px action-bar / pagination rhythm */
.btn-md, .button-md {
    height: 32px;
    padding: 0 var(--spacing-md);
    font-size: 14px;
    line-height: 1;
}

/* Dark mode buttons */
/* NOTE: Base dark mode .btn defined in canonical dark mode block below (~line 4671) */

.dark-mode .btn-icon {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .btn-icon:hover {
    background: #3d3d3d;
    border-color: var(--divider-color);
}

/* Card Actions - Absolute positioned action buttons */
.card-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

@media (min-width: 601px) {
    .card-actions {
        flex-direction: row;
        gap: 8px;
    }
}

/* Info Card - Highlighted information card */
.info-card {
    margin: 24px 0;
    padding: 20px;
    background: #fafafa;
    border-radius: 4px;
    border-left: 4px solid var(--primary-color);
}

.info-card h3 {
    margin: 0 0 12px 0;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
}

.info-card p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.dark-mode .info-card {
    background: var(--surface-color);
    border-left-color: var(--primary-light);
}

.dark-mode .info-card h3 {
    color: var(--primary-light);
}

.dark-mode .info-card p {
    color: #ddd;
}

/* Form Layouts */
.form-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 769px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid-full {
        grid-column: 1 / -1;
    }
}

.form-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 769px) {
    .form-filters {
        flex-direction: row;
        gap: 20px;
    }
}

/* Form Row - Side-by-side selects (mobile-first) */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 769px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Form Actions - Button footer for forms (mobile-first: stacked) */
.form-actions,
.cp-form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.form-actions .btn, .form-actions .button,
.cp-form-actions .btn, .cp-form-actions .button {
    width: 100%;
}

@media (min-width: 769px) {
    .form-actions,
    .cp-form-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    .form-actions .btn, .form-actions .button,
    .cp-form-actions .btn, .cp-form-actions .button {
        width: auto;
    }
}

.dark-mode .form-actions,
.dark-mode .cp-form-actions {
    border-top-color: var(--divider-color);
}

/* Form Section - Grouped form area with heading */
.form-section {
    padding: 1rem;
    border-bottom: 1px solid var(--divider-color);
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid;
}

/* Collapsible form section — progressive disclosure for niche fields.
 * When used directly inside .form-grid, span the full row so collapsed
 * stripes don't leave empty cells in the 2-column layout. */
.form-grid > details.form-section-collapsible {
    grid-column: 1 / -1;
}
details.form-section-collapsible > summary {
    cursor: pointer;
    list-style: none;
    outline: none;
}
details.form-section-collapsible > summary::-webkit-details-marker { display: none; }
details.form-section-collapsible > summary > h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
details.form-section-collapsible > summary > h2::after {
    content: '';
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-right: 0.25em;
    margin-bottom: 0.2em;
    opacity: 0.6;
}
details.form-section-collapsible[open] > summary > h2::after {
    transform: rotate(225deg);
    margin-top: 0.2em;
    margin-bottom: 0;
}
details.form-section-collapsible:not([open]) > summary > h2 {
    margin-bottom: 0;
}
details.form-section-collapsible:not([open]) > summary:hover > h2,
details.form-section-collapsible > summary:focus-visible > h2 {
    color: var(--primary-color);
}

/* Inline collapsible (used inside a parent .form-section to hide niche subfields). */
details.form-collapsible-inline {
    margin-top: 0.5rem;
}
details.form-collapsible-inline > summary {
    cursor: pointer;
    list-style: none;
    color: var(--primary-color);
    font-size: 0.9rem;
    padding: 0.4rem 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
details.form-collapsible-inline > summary::-webkit-details-marker { display: none; }
details.form-collapsible-inline > summary::after {
    content: '';
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-bottom: 0.15em;
}
details.form-collapsible-inline[open] > summary::after {
    transform: rotate(225deg);
    margin-top: 0.15em;
    margin-bottom: 0;
}
details.form-collapsible-inline > summary:hover,
details.form-collapsible-inline > summary:focus-visible {
    text-decoration: underline;
}
details.form-collapsible-inline > .form-collapsible-inline__body {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--divider-color);
}

/* Radio Group - Horizontal radio layout */
.radio-group {
    display: flex;
    gap: 1.5rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

/* Checkbox and Radio Labels */
.checkbox-label, .radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

/* Form Help Text */
.form-help {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Checkbox Grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* gap: 0.5rem; */
}

/* Unified Filter Card - Used across garage, zulassungszahlen, and features-bugs */
.filter-card {
    position: relative;
    padding: 1rem;
    margin: 2rem 0 0;
}

/* Disable hover effects on filter card */
.filter-card:hover {
    box-shadow: var(--card-elevation) !important;
    transform: none !important;
}

.filter-card .entry-header {
    padding: 0 0 1rem 0;
}

.filter-card .entry-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.filter-card .entry-meta {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Chart Card - Used in zulassungszahlen */
.chart-card {
    padding: 1rem;
}

/* Upload Preview Item - Material Design List */
.upload-preview-item {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider-color);
}

.upload-preview-item:last-child {
    border-bottom: none;
}

.upload-preview-item img {
    max-width: 250px;
    border-radius: 4px;
}

.dark-mode .upload-preview-item {
    border-color: var(--border-color);
}

/* Upload Preview Grid — used for in-form photo thumbnails (features-bugs, veranstaltungen) */
.upload-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.upload-preview-grid:empty {
    margin-top: 0;
}

.upload-preview-grid .upload-preview-item {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    background: var(--divider-color);
}

.upload-preview-grid .upload-preview-item img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.upload-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-preview-remove:hover {
    background: rgba(220, 53, 69, 0.9);
}

/* Modal Dialog System */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.modal.active {
    display: flex;
}

.modal .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal .modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 4px;
    width: 95%;
    max-height: 95vh;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.modal .modal-dialog.modal-wide {
    max-width: 700px;
}

.modal .modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal .modal-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--divider-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Validation hint that lives in the footer (always visible, never hidden below
   a long scrollable form). Sits on the left; when the buttons don't fit on the
   same row, hint stays on its own row above them via flex-basis:100%. */
.modal .modal-footer-hint {
    color: var(--error-color, #B71C1C);
    font-size: 0.875rem;
    line-height: 1.3;
    margin-right: auto;
    flex: 1 1 100%;
    order: -1;
    align-items: center;
    gap: 0.35rem;
    text-align: left;
}
.modal .modal-footer-hint::before {
    content: "⚠";
    font-size: 1rem;
}

.modal .modal-footer a,
.modal .modal-footer button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.modal .modal-footer a:not(.btn):not(.btn-flat),
.modal .modal-footer button:not(.btn):not(.btn-flat) {
    background: transparent;
    color: var(--primary-color, #0851a4);
}

.modal .modal-footer a:not(.btn):not(.btn-flat):hover,
.modal .modal-footer button:not(.btn):not(.btn-flat):hover {
    background: rgba(8, 81, 164, 0.08);
}

.modal .modal-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 1rem 0;
    padding: 0 0 0.75rem 0;
    border-bottom: 1px solid var(--divider-color);
}

.modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
}
.modal .modal-close:hover {
    color: var(--text-primary);
}

/* Modal dialog: mobile-first — 95% width is now the base (see .modal .modal-dialog above).
   On wider screens the width: 90% kicks in via the max-width: 500px constraint. */

.dark-mode .modal .modal-dialog {
    background: var(--surface-color);
    color: var(--text-primary);
}
.dark-mode .modal .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}
.dark-mode .modal .modal-close {
    color: #bbb;
}
.dark-mode .modal .modal-footer a:not(.btn),
.dark-mode .modal .modal-footer button:not(.btn) {
    color: var(--primary-light);
}

/* Modal Login Styles - Enhanced for #modal_login */
#modal_login {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

#modal_login.active {
    display: flex;
}

#modal_login .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* Login modal: mobile-first base (small screen), desktop override below */
#modal_login .modal-content {
    position: relative;
    background: #fff;
    border-radius: 4px;
    min-width: 0;
    max-width: 500px;
    width: calc(100% - 2rem);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 1.25rem;
}

@media (min-width: 601px) {
    #modal_login .modal-content {
        min-width: 320px;
        width: 90%;
        padding: 1.5rem;
    }
}

#modal_login .modal-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    padding: 0 0 0.75rem 0;
    border-bottom: 1px solid var(--divider-color);
}

#modal_login .form-group {
    margin: 1rem 0;
}

#modal_login .form-group input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

#modal_login .form-group input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    outline: none;
}

#modal_login .form-group label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

#modal_login p {
    margin: 1rem 0;
    color: var(--text-secondary);
}

#modal_login p label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

#modal_login p a {
    color: var(--primary-color);
    text-decoration: none;
}

#modal_login p a:hover {
    text-decoration: underline;
}

#modal_login .btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 100%;
    margin-top: 0.5rem;
}

#modal_login .btn:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode styles for modal_login */
.dark-mode #modal_login .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.dark-mode #modal_login .modal-content {
    background: var(--surface-color);
    color: var(--text-primary);
}

.dark-mode #modal_login .modal-title {
    color: var(--text-primary);
    border-color: var(--divider-color);
}

.dark-mode #modal_login .form-group input {
    background-color: var(--surface-color);
    border-color: var(--divider-color);
    color: var(--text-primary);
}

.dark-mode #modal_login .form-group input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
}

.dark-mode #modal_login .form-group label {
    color: var(--text-secondary);
}

.dark-mode #modal_login p {
    color: var(--text-secondary);
}

.dark-mode #modal_login p a {
    color: var(--primary-light);
}

.dark-mode #modal_login .btn {
    background: transparent;
    color: var(--primary-light);
    border: 1px solid var(--primary-light);
}

.dark-mode #modal_login .btn:hover {
    background: rgba(100, 181, 246, 0.12);
}

/* =====================================================
   ACTION BUTTONS (shared icon-label button pattern)
   Used by: header-login-btn, header-edit-btn,
            header-user-trigger, action-btn (sections)
   ===================================================== */

/* Mobile-first: icon-only on smallest screens, labels shown at 480px+.
   min-* enforces a 44x44 touch target even when the label collapses. */
.action-btn,
.header-login-btn,
.header-edit-btn,
.header-user-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.5rem;
    /* box-sizing must match across <a> and <button> — UAs default <button>
       to border-box and <a> to content-box, so the same min-width/min-height
       otherwise renders different total sizes. */
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    /* Explicit line-height: <a> inherits the page's 1.6 line-height while
       <button> uses line-height:normal — fix it so labels are the same height. */
    line-height: 1.2;
    transition: all 0.2s ease;
    text-align: center;
    border-radius: 8px;
    white-space: nowrap;
}

.action-btn span,
.header-login-btn span,
.header-edit-btn span,
.header-user-trigger span {
    display: none;
}

@media (min-width: 480px) {
    .action-btn,
    .header-login-btn,
    .header-edit-btn,
    .header-user-trigger {
        padding: 0.375rem 0.5rem;
    }

    .action-btn span,
    .header-login-btn span,
    .header-edit-btn span,
    .header-user-trigger span {
        display: inline;
    }
}

.action-btn:hover,
.header-login-btn:hover,
.header-edit-btn:hover,
.header-user-trigger:hover {
    color: var(--primary-color);
    background: rgba(8, 81, 164, 0.08);
}

.action-icon,
.action-btn svg,
.header-login-btn svg,
.header-edit-btn svg,
.header-user-trigger svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: currentColor;
    transition: color 0.2s ease;
}

.action-btn:hover svg,
.action-btn:hover .action-icon,
.header-login-btn:hover svg,
.header-edit-btn:hover svg,
.header-user-trigger:hover svg {
    color: var(--primary-color);
}

/* Dark mode */
.dark-mode .action-btn,
.dark-mode .header-login-btn,
.dark-mode .header-edit-btn,
.dark-mode .header-user-trigger {
    background: transparent;
    color: var(--text-primary);
    outline: none;
    border: none;
}

.dark-mode .action-icon,
.dark-mode .action-btn svg,
.dark-mode .header-login-btn svg,
.dark-mode .header-edit-btn svg,
.dark-mode .header-user-trigger svg {
    color: var(--text-secondary);
}

.dark-mode .action-btn:hover,
.dark-mode .header-login-btn:hover,
.dark-mode .header-edit-btn:hover,
.dark-mode .header-user-trigger:hover {
    background: rgba(8, 81, 164, 0.15);
    color: var(--primary-color);
}

.dark-mode .action-btn:hover svg,
.dark-mode .action-btn:hover .action-icon,
.dark-mode .header-login-btn:hover svg,
.dark-mode .header-edit-btn:hover svg,
.dark-mode .header-user-trigger:hover svg {
    color: var(--primary-color);
}

/* =====================================================
   HEADER USER MENU DROPDOWN
   ===================================================== */

.header-user-menu {
    position: relative;
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 160px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.header-user-menu.active .header-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-user-dropdown a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s;
    border-bottom: 1px solid var(--divider-color);
}

.header-user-dropdown a:last-child {
    border-bottom: none;
}

.header-user-dropdown a:hover {
    background: rgba(8, 81, 164, 0.08);
    color: var(--primary-color);
}

.dark-mode .header-user-dropdown {
    background: var(--surface-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .header-user-dropdown a {
    color: var(--text-primary);
    border-bottom-color: var(--divider-color);
}

.dark-mode .header-user-dropdown a:hover {
    background: rgba(11, 164, 236, 0.2);
    color: var(--primary-light);
}

/* Container for header buttons (mobile-first) */
.header-buttons-container {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

@media (min-width: 601px) {
    .header-buttons-container {
        top: 1rem;
        right: 1rem;
    }
}

/* =====================================================
   FOOTER LOGIN SECTION
   ===================================================== */

.footer-login-section {
    background: rgba(11, 164, 236, 0.05);
    border-bottom: 1px solid var(--divider-color);
    margin-top: -1rem;
}

.footer-login-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}

.footer-login-container h3,
.footer-login-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--text-primary);
}

.footer-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Mobile-first: stacked on small screens, row on 601px+ */
.footer-login-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-login-fields input[type="text"],
.footer-login-fields input[type="password"],
.footer-login-btn {
    width: 100%;
}

@media (min-width: 601px) {
    .footer-login-fields {
        flex-direction: row;
    }
    .footer-login-fields input[type="text"],
    .footer-login-fields input[type="password"],
    .footer-login-btn {
        width: auto;
    }
}

.footer-login-fields input[type="text"],
.footer-login-fields input[type="password"] {
    flex: 1;
    min-width: 150px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.footer-login-fields input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(11, 164, 236, 0.1);
}

.footer-login-btn {
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color, #0ba4ec);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.footer-login-btn:hover {
    background-color: var(--primary-dark);
}

.footer-login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.footer-login-links label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.footer-login-links input[type="checkbox"] {
    cursor: pointer;
}

.footer-login-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.footer-login-links a:hover {
    text-decoration: underline;
}

/* Dark mode for footer login */
.dark-mode .footer-login-section {
    background: rgba(11, 164, 236, 0.1);
    border-bottom-color: var(--divider-color);
}

.dark-mode .footer-login-container h3,
.dark-mode .footer-login-title {
    color: var(--text-primary);
}

.dark-mode .footer-login-fields input[type="text"],
.dark-mode .footer-login-fields input[type="password"] {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .footer-login-fields input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
}

.dark-mode .footer-login-links label {
    color: var(--text-secondary);
}

.dark-mode .footer-login-links a {
    color: var(--primary-light);
}

/* Carousel - Universal image carousel */
.carousel {
    width: 100%;
    max-width: 100%;
}

.carousel-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.carousel-track {
    width: 100%;
    display: flex;
}

.carousel-slide {
    width: 100%;
    flex-shrink: 0;
    display: block;
    position: static;
}

.carousel-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
}

.carousel picture {
    width: 100%;
    height: 100%;
    display: block;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Carousel captions - below image, not overlay */
.carousel-captions {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: flex-start;
}

.carousel-caption {
    display: none;
    position: static !important;
    background: none !important;
    padding: 8px 0 !important;
    color: var(--text-secondary) !important;
    text-align: center;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    bottom: auto !important;
    width: 100%;
}

.carousel-caption.active {
    display: block;
}

.dark-mode .carousel-caption {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Carousel navigation buttons - positioned as overlay on sides */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: #333;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-prev:hover,
.carousel-next:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 16px;
}

.carousel-next {
    right: 16px;
}

.carousel-prev:disabled,
.carousel-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Carousel indicators - dot indicators at bottom.
   Buttons are 24×24 (WCAG 2.5.8 touch-target minimum) with the dot
   rendered via ::before so the visible indicator stays compact while
   the click/tap area is comfortable. */
.carousel-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 10;
}

.carousel-indicators button {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.carousel-indicators button::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    background: transparent;
    transition: background 0.3s ease;
    box-sizing: border-box;
}

.carousel-indicators button.active::before,
.carousel-indicators button:hover::before {
    background: white;
}

/* Dark mode carousel controls */
.dark-mode .carousel-prev,
.dark-mode .carousel-next {
    background: rgba(45, 45, 45, 0.9);
    color: var(--text-primary);
    border: none;
}

.dark-mode .carousel-prev:hover,
.dark-mode .carousel-next:hover {
    background: var(--surface-color);
}

.dark-mode .carousel-indicators button::before {
    border-color: rgba(255, 255, 255, 0.7);
}

.dark-mode .carousel-indicators button.active::before,
.dark-mode .carousel-indicators button:hover::before {
    background: rgba(255, 255, 255, 0.9);
}

/* Latest Entries Lists */
.latest-entries {
    list-style: none;
    margin: 0;
    padding: 0;
}

.latest-entries li {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--divider-color);
}

.latest-entries li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.latest-entries a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    font-size: 14px;
    line-height: 1.4;
}

.latest-entries a:hover {
    color: var(--primary-color);
}

.latest-entries .meta {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Dark mode styles for latest entries */
.dark-mode .latest-entries li {
    border-bottom-color: var(--divider-color);
}

.dark-mode .latest-entries a {
    color: var(--text-primary);
}

.dark-mode .latest-entries a:hover {
    color: var(--primary-light);
}

.dark-mode .latest-entries .meta {
    color: var(--text-secondary);
}

/* Compact Cards */
.compact-card {
    padding: 0;
}

.compact-card .entry-header {
    padding: 1rem;
    border-bottom: 1px solid var(--divider-color);
}

.compact-card .entry-title {
    font-size: 1.25rem;
    margin: 0;
}

.compact-card .entry-content {
    padding: 0.5rem 1rem;
}

.compact-card .entry-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--divider-color);
}

/* Compact Latest Entries */
.latest-entries.compact li {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.latest-entries.compact a {
    font-size: 13px;
}

/* =====================================================
   BADGES - Reusable status/type indicators
   ===================================================== */

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
}

.badge-blue {
    background-color: rgba(8, 81, 164, 0.1);
    color: var(--primary-color);
}

.badge-bug,
.badge-red {
    background-color: rgba(183, 28, 28, 0.10);
    color: var(--error-color);
}

.badge-gray {
    background-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
}

.badge-orange {
    background-color: rgba(230, 81, 0, 0.12);
    color: #BF360A;
}

.badge-green {
    background-color: rgba(27, 94, 32, 0.12);
    color: var(--success-color);
}

.dark-mode .badge-blue {
    background-color: rgba(100, 181, 246, 0.15);
    color: var(--primary-light);
}

.dark-mode .badge-bug,
.dark-mode .badge-red {
    background-color: rgba(239, 154, 154, 0.15);
    color: #EF9A9A;
}

.dark-mode .badge-gray {
    background-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.80);
}

.dark-mode .badge-orange {
    background-color: rgba(255, 204, 128, 0.15);
    color: #FFCC80;
}

.dark-mode .badge-green {
    background-color: rgba(165, 214, 167, 0.15);
    color: #A5D6A7;
}

/* =====================================================
   CHIP - Universal removable/interactive pill component
   Used by: PM recipients, search filters, topic tags, wiki tags
   ===================================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.35rem 0.45rem 0.35rem 0.55rem;
    border: 1px solid rgba(8, 81, 164, 0.12);
    border-radius: 999px;
    background: rgba(8, 81, 164, 0.07);
    color: var(--text-primary);
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
}

.chip__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 81, 164, 0.12);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.chip__remove:hover {
    background: rgba(8, 81, 164, 0.25);
}

.dark-mode .chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .chip__remove {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.76);
}

.dark-mode .chip__remove:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* =====================================================
   VOTE BUTTONS - For voting UI
   ===================================================== */

.vote-btn {
    background: none;
    border: 1px solid var(--divider-color);
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vote-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.vote-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.vote-btn svg {
    width: 20px;
    height: 20px;
}

.latest-entries.compact .meta {
    font-size: 11px;
    margin-top: 0;
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Dark mode styles for compact cards */
.dark-mode .compact-card .entry-header,
.dark-mode .compact-card .entry-footer {
    border-color: var(--divider-color);
}

/* Single Post Advertisement */
.entry-content-wrapper {
    display: flex;
}

.entry-content {
    flex: 1;
    min-width: 0; /* Prevent flex item from overflowing */
}

.entry-sidebar {
    flex: 0 0 336px;
    display: none; /* Hide on mobile */
}

.advertisement {
    position: sticky;
    padding: 24px 16px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    width: 336px;
    height: 600px;
}

/* Dark mode styles for advertisement */
.dark-mode .advertisement {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* =====================================================
   UNIFIED COMMENTS SECTION
   Used by WordPress blog + all custom sections
   ===================================================== */

/* Container — used by custom sections directly */
.comments-area {
    margin: 2rem 0;
    padding: 1rem;
    background-color: var(--surface-color);
    border-radius: 4px;
    box-shadow: var(--card-elevation);
}

/* WP wrapper: no card styling (comments-area inside provides it) */
.comments-section {
    margin: 2rem 0;
}

/* Headings */
.comments-area h3,
.comments-section h2,
.comments-area h2 {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    color: var(--text-primary);
}

/* WP reply heading — same style */
.comment-reply-title {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    color: var(--text-primary);
}

/* Comment form */
.comment-form {
    margin-bottom: 2rem;
}

.comment-form .rating-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.comment-form .rating-section span {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.comment-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--divider-color);
    border-radius: 4px;
    background-color: var(--surface-color);
    color: var(--text-primary);
    box-sizing: border-box;
    max-width: 100%;
    min-height: 100px;
    margin-bottom: 0.75rem;
    resize: vertical;
}

.comment-form label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

/* WordPress blog comment form: name/email/url fields */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--divider-color);
    border-radius: 4px;
    background-color: var(--surface-color);
    color: var(--text-primary);
    box-sizing: border-box;
    max-width: 100%;
}

.comment-form input[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.comment-form input[type="submit"]:hover {
    background-color: var(--primary-dark);
}

.comment-form .required {
    color: var(--error-color);
    font-weight: bold;
}

.comment-notes {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Comment list */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual comment (mobile-first: compact padding) */
.comment {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    position: relative;
}

/* Comment meta (author + date line) */
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* WP nests: .comment > article.comment-body > footer.comment-meta */
.comment-body {
    /* passthrough for WP nested structure */
}

/* WP comment-metadata (date link) */
.comment-metadata {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.comment-metadata a {
    color: var(--text-secondary);
    text-decoration: none;
}

.comment-metadata a:hover {
    color: var(--primary-color);
}

/* WP .comment-author.vcard contains b.fn / cite.fn + span.says + optional avatar */
.comment-author.vcard {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-author .fn {
    font-weight: 500;
    color: var(--text-primary);
    font-style: normal;
}

.comment-author .says {
    display: none;
}

.comment-author img.avatar {
    border-radius: 50%;
    vertical-align: middle;
}

.comment-author {
    font-weight: 500;
    color: var(--text-primary);
}

.comment-author a {
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
}

.comment-author a:hover {
    color: var(--primary-color);
}

.comment-date {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Optional star rating in comment meta */
.comment-rating {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    margin-right: 0.25rem;
}

.comment-rating svg {
    width: 16px;
    height: 16px;
    fill: #f59e0b;
}

.comment-rating svg.star-empty {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5;
}

.dark-mode .comment-rating svg.star-empty {
    stroke: #555;
}

/* Comment text body */
.comment-content {
    line-height: 1.6;
    word-wrap: break-word;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.comment-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.comment-content a:hover {
    text-decoration: underline;
}

/* Comment actions dropdown (edit/delete) */
.comment-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.comment-actions .dropdowncomment {
    opacity: 0.6;
    transition: opacity 0.2s ease;
    cursor: pointer;
    padding: 0;
    background: transparent;
    border: 0;
}

.comment-actions .dropdowncomment:hover {
    opacity: 1;
}

.text-button {
    display: inline;
    padding: 0;
    color: var(--primary-color);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.text-button:hover,
.text-button:focus {
    color: var(--primary-dark);
}

.comment-actions .dropdown-content {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--surface-color);
    border-radius: 4px;
    box-shadow: var(--card-elevation);
    min-width: 120px;
    z-index: 100;
    display: none;
}

.comment-actions .dropdown-content.active {
    display: block;
}

.comment-actions .dropdown-content li {
    list-style: none;
}

.comment-actions .dropdown-content li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
}

.comment-actions .dropdown-content li a:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Clickable rating stars (for forms) — inline SVG. Works for both
   `<div class="rating">` (legacy, stromtankstellen) and `<button class="rating">`
   (anbieter / new flows). Resetting the button defaults keeps the star icon
   itself as the only visual — no box outline around the star. */
.rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.1s ease;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

button.rating { outline: none; }
button.rating:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 4px; }

.rating svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #9e9e9e;
    stroke-width: 1.5;
    transition: fill 0.15s ease, stroke 0.15s ease;
}

.rating:hover {
    transform: scale(1.1);
}

.rating:hover svg,
.rating.active_hover svg,
.rating.active_click svg {
    fill: #f59e0b;
    stroke: #f59e0b;
}

/* WordPress-specific: nested comments */
.comment-respond {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--divider-color);
}

.comment-respond h3 {
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

/* Mobile-first: compact nesting on small screens */
.children {
    padding-left: 1rem;
    list-style: none;
}

@media (min-width: 769px) {
    .comment {
        padding: 1rem;
    }
    .children {
        padding-left: 2rem;
    }
}

/* Dark mode */
.dark-mode .comments-area {
    background-color: var(--surface-color);
}

.dark-mode .comment {
    background: rgba(255, 255, 255, 0.05);
}

.dark-mode .comment-respond {
    border-top-color: var(--divider-color);
}

.dark-mode .comment-form textarea,
.dark-mode .comment-form input[type="text"],
.dark-mode .comment-form input[type="email"],
.dark-mode .comment-form input[type="url"] {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--divider-color);
    color: var(--text-primary);
}

.dark-mode .comment-actions .dropdown-content {
    background: var(--surface-color);
}

.dark-mode .comment-actions .dropdown-content li a:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Comment responsive: mobile-first base above, desktop override at .children block */

/* Single Post Styles */
.single .entry-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.single .post-thumbnail {
    margin: -1.5rem -1.5rem 1.5rem;
}

.single .post-thumbnail img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* WordPress Image Alignment */
.aligncenter {
    display: block;
    margin: 1.5rem auto;
}

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

.size-large {
    max-width: 100%;
    height: auto;
}

/* WordPress Caption Text */
.wp-caption-text {
    font-size: 0.8rem;
}

/* Post Navigation */
.post-navigation {
    margin-top: 2rem;
}

.post-navigation .nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.post-navigation a {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, #fafafa);
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid var(--divider-color);
    border-radius: var(--border-radius, 4px);
    transition: background-color 0.2s, border-color 0.2s;
    font-weight: 500;
    font-size: 0.9375rem;
    max-width: 100%;
    box-sizing: border-box;
}

.post-navigation .nav-next a {
    justify-content: flex-end;
}

.post-navigation a:hover {
    background: var(--background-color, #f5f5f5);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.post-navigation .nav-subtitle {
    display: none;
}

.post-navigation .nav-title {
    font-weight: 500;
    display: inline-block;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.dark-mode .post-navigation a {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--divider-color);
}

.dark-mode .post-navigation a:hover {
    background: var(--surface-color);
    color: var(--primary-light);
    border-color: var(--primary-light);
}

/* Single Post Cards */

.single .post-content {
    margin: 2rem 0 0;
    padding-bottom: 0;
}

.single .entry-footer {
    margin-top: 1rem;
    text-align: right;
}

figure.wp-caption.aligncenter {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1rem;
}

/* ==========================================================================
   MEDIA QUERIES - CONSOLIDATED
   ========================================================================== */

/* Tablet and Desktop Styles - 768px and up */
@media (min-width: 769px) {
    /* Page container */
    #page {
        max-width: 1150px;
        margin: 0 auto;
    }

    /* Header */
    .site-header {
        background: var(--primary-color);
    }

    .site-branding {
        display: flex; /* Show on tablet+ */
        padding: 16px 24px;
        min-height: 60px;
        max-width: 1150px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    /* Show toggle in site-branding on tablet+ */
    .site-branding .dark-mode-toggle-container {
        display: flex;
    }
    
    /* Hide toggle in header-inner on tablet+ (show in site-branding instead) */
    .header-inner .dark-mode-toggle-container {
        display: none;
    }

    .mobile-site-title {
        display: none; /* Hide on tablet+ */
    }

     .search-container {
        margin-left: 16px;
    }

    .search-toggle-checkbox:checked ~ .search-form,
    .search-form:focus-within {
        width: 240px;
    }

    .search-field {
        font-size: 14px;
    }

    .site-title {
        font-size: 28px;
    }

    .site-navigation {
        float: left;
        margin-top: 15px;
    }

    /* Desktop Navigation - Show horizontal menu */
    .primary-menu-container {
        display: block;
        position: static;
        width: auto;
        max-width: none;
        height: auto;
        background: none;
        padding: 0;
        overflow: visible;
        transform: none;
        box-shadow: none;
        z-index: auto;
    }

    .primary-menu-container .menu-wrapper {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        padding-top: 0;
        width: auto;
        margin: 0;
    }

    .main-navigation {
        display: block;
        position: relative;
        background: none;
        box-shadow: none;
        height: auto;
        margin: 0 auto 0 20px; /* Reset to left alignment on tablet+ */
    }
    
    .main-navigation .nav-container {
        padding: 0 24px; /* Restore padding on tablet+ */
    }

    .main-navigation > .menu-wrapper {
        display: flex !important;
        flex-direction: row;
        padding-top: 0;
        margin: 0;
    }

    .main-navigation ul {
        justify-content: flex-start;
        gap: 24px;
    }

    .main-navigation a {
        font-size: 17px;
        padding: 8px 0;
    }

    .primary-menu-container .menu-wrapper a {
        color: var(--menu-text-color);
    }

    /* Footer - Desktop: 3 columns */
    .footer-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        padding: 0 2rem;
    }

    .footer-social-legal {
        padding: 1.5rem 0;
    }

    .footer-social-list {
        flex-direction: row;
        gap: 1.5rem;
    }

    .footer-legal-list {
        flex-direction: row;
        gap: 1.5rem;
    }

    /* Mega Menu - Desktop: 3 columns */
    .mega-menu-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

    /* Show mega menu toggle on desktop */
    .mega-menu-toggle {
        display: flex;
    }

    /* Desktop mega menu positioning — top is set dynamically by JS based on actual header height */
    .mega-menu-dropdown {
        position: absolute;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1150px;
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .mega-menu-dropdown.active {
        max-height: 80vh;
    }
    
    /* Reset container padding on desktop to match header-inner */
    .mega-menu-container {
        padding: 1rem 0; /* Remove horizontal padding since dropdown has it */
    }
    
    /* Hide search in mega menu on desktop */
    .mega-menu-search-wrapper {
        display: none;
    }
    
    /* Hide mega menu close button on desktop (use toggle in header instead) */
    .mega-menu-close {
        display: none !important;
    }

    /* Search */
    .search-container {
        display: flex; /* Show on desktop */
        margin-left: 24px;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    /* Content */
    .site-content {
        margin-top: 0;
        padding: 16px;
    }

    /* Posts Grid */
    .main-posts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin: 2rem 0;
    }

    /* Homepage */
    body.home .main-posts {
        margin: 2rem 0 0;
    }

    /* Featured post styles handled by existing rules */

    body.home .featured-post .entry-title {
        font-size: 24px;
    }

    /* Special Cards */
    .special-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Post Navigation */
    .post-navigation .nav-links {
        flex-direction: row;
        justify-content: space-between;
    }

    .post-navigation a {
        display: inline-flex;
    }

    .post-navigation .nav-next a {
        justify-content: flex-start;
    }

    .post-navigation .nav-previous {
        margin-bottom: 0;
    }
    
    /* Billboard Ad - Desktop Enhancement */
    .billboard-ad {
        max-width: none;
        width: 100%;
        grid-column: 1 / -1; /* Ensure full width span on all screen sizes */
    }
}

/* Large Desktop Styles - 1024px and up */
@media (min-width: 1024px) {
    /* Content */
    .site-content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    /* Posts Grid */
    .main-posts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Special Cards */
    .special-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Homepage Featured Post - Desktop Layout */
    body.home .featured-post .card .featured-flex {
        display: flex;
        flex-direction: row;
        height: 100%;
    }
    
    body.home .featured-post .card .featured-image-container {
        width: 50%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: stretch;
        aspect-ratio: 16/9;
        height: auto;
        min-height: 0;
        padding-top: 0;
    }
    
    body.home .featured-post .card .featured-image-container img,
    body.home .featured-post .card .featured-image-container .featured-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    body.home .featured-post .card .featured-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    body.home .featured-post .card .featured-content {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.home .featured-post .post-thumbnail {
        padding-top: 0;
    }

    body.home .featured-post .entry-meta {
        display: none;
    }

    body.home .featured-post .entry-title {
        line-height: 1.2;
    }

    /* Single Post Advertisement */
    .entry-sidebar {
        display: block;
        margin: 0 1rem;
    }

    .card:hover,
    .special-card:hover {
      box-shadow: var(--card-elevation-hover);
      transform: translateY(-2px);
    }

    .card:hover .post-thumbnail img,
    .special-card:hover .post-thumbnail img {
      transform: scale(1.03);
    }
    
    /* Ensure mobile site title is hidden on large desktop */
    .mobile-site-title {
        display: none !important; /* Force hide on large desktop */
    }

    .card .post-thumbnail img,
    .special-card .post-thumbnail img {
      left: 0;
      width: 100%;
    }
}



/* =====================================================
   UNIVERSAL FORM STYLES - Material Design
   Applied to all forms site-wide using native HTML elements
   ===================================================== */

/* Form wrapper for label + input pairs */
.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Universal label styling */
label,
.form-group label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0.75rem 0 0;
  transition: color 0.2s ease;
}

/* Form group label specific styling */
.form-group label {
  margin: 0.75rem 0 0;
  color: var(--text-primary);
}

/* Form group select styling */
.form-group select {
  /* padding + padding-right inherited from universal `select` rules below
     (base padding: 12px + select-specific padding-right: 40px for caret room). */
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  /* background-color only — a `background:` shorthand would wipe the
     global select caret SVG set below. */
  background-color: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.form-group select:hover {
  border-color: #bdbdbd;
}

.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Universal input, textarea, and select styling */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-sizing: border-box;
}

/* Select-specific styling (dropdown arrow) */
select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  cursor: pointer;
}

/* Textarea-specific */
textarea {
  min-height: 80px;
  resize: vertical;
}

/* Comment form textarea — now in unified comments block above */

/* ===== Form Tabs - shared across sections ===== */
.form-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: var(--surface-color);
  border-bottom: 2px solid var(--divider-color);
  margin: 0;
  padding: 0;
  /* Fade hint on right edge — signals "more tabs, scroll right" when the
     bar overflows the card. Falls back to plain bg if scroll-driven
     animations / mask aren't supported. */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}
.form-tabs::-webkit-scrollbar { display: none; }
/* Drop the right-edge fade once the user has scrolled to the very end. */
.form-tabs.is-scrolled-end {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Mobile-first: compact tabs on small screens */
.form-tab {
  padding: 8px 10px;
  text-align: center;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 0;
  font-weight: 500;
  font-size: 13px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

@media (hover: hover) {
  .form-tab:hover {
    color: var(--text-primary);
    background-color: var(--background-color);
  }
}

.form-tab.active {
  color: var(--primary-color);
  font-weight: 600;
  border-bottom-color: var(--primary-color);
}

.form-tab.is-disabled,
.form-tab[disabled] {
  color: var(--text-secondary);
  opacity: 0.55;
  cursor: not-allowed;
}
.form-tab.is-disabled:hover,
.form-tab[disabled]:hover {
  background: none;
  color: var(--text-secondary);
}

.form-tab-content { display: none; }
.form-tab-content.active { display: block; }
.cp-panel .form-tab-content { padding: 1rem; }
/* When tab content has its own .form-section / .form-grid, let them handle padding */
.cp-panel .form-tab-content:has(.form-section),
.cp-panel .form-tab-content:has(.form-grid) { padding: 0; }

@media (min-width: 769px) {
  .form-tab { padding: 12px 24px; font-size: 1rem; }
}

/* Dark mode form tabs */
.dark-mode .form-tabs {
  background-color: var(--surface-color);
  border-bottom-color: var(--divider-color);
}
.dark-mode .form-tab { background: transparent; color: var(--text-secondary); border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.dark-mode .form-tab.active {
  color: var(--primary-light);
  border-bottom-color: var(--primary-light);
}

/* ===== Edit Form Card - shared across sections ===== */
/* Sections using tabbed edit forms: card with entry-header inside, zero padding */
.edit-form-card {
  padding: 0;
  margin-top: 2rem;
}

.edit-form-card form {
  display: block;
}

.edit-form-card .form-actions {
  margin: 0 1rem;
  padding-bottom: 1rem;
}

.edit-form-card .form-back-link {
  margin-left: 1rem;
  margin-right: 1rem;
}

.edit-form-card .entry-header {
  padding: 1rem;
  border-bottom: 1px solid var(--divider-color);
}

.edit-form-card .entry-title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}

.dark-mode .edit-form-card .entry-header {
  border-bottom-color: var(--divider-color);
}

/* ===== Message Boxes - shared across sections ===== */
.message,
.cp-message {
  padding: 1rem 1.25rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  border-left: 4px solid;
}

.message h3,
.cp-message h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.message p,
.cp-message p {
  margin: 0;
  font-size: 0.9rem;
}

.message-success,
.cp-message-success {
  background: #e8f5e9;
  border-left-color: #4CAF50;
  color: #2e7d32;
}

.message-error,
.cp-message-error {
  background: #ffebee;
  border-left-color: #f44336;
  color: #c62828;
}

.message-warning,
.cp-message-warning {
  background: #fff3e0;
  border-left-color: #FF9800;
  color: #e65100;
}

.message-info,
.cp-message-info {
  background: #e3f2fd;
  border-left-color: #2196F3;
  color: #1565c0;
}

.dark-mode .message-success,
.dark-mode .cp-message-success {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
}

.dark-mode .message-error,
.dark-mode .cp-message-error {
  background: rgba(244, 67, 54, 0.15);
  color: #ef9a9a;
}

.dark-mode .message-warning,
.dark-mode .cp-message-warning {
  background: rgba(255, 152, 0, 0.15);
  color: #ffb74d;
}

.dark-mode .message-info,
.dark-mode .cp-message-info {
  background: rgba(33, 150, 243, 0.15);
  color: var(--primary-light);
}

/* Hover state */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
textarea:hover,
select:hover {
  border-color: var(--primary-color);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12);
}

/* Focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(8, 81, 164, 0.2);
}

/* Button and submit styling — use .btn class on <button> elements */
input[type="submit"],
input[type="button"],
.btn,
.button {
  padding: 12px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: var(--primary-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  box-sizing: border-box;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.2;
}

input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover {
  background: var(--primary-dark);
}

/* Primary button variant */
.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

/* Secondary button variant — specificity must beat input[type="submit"] and a:link above */
.btn-secondary, .button-secondary, .button2,
a.btn-secondary, a.button-secondary, a.button2,
input[type="submit"].btn-secondary,
input[type="submit"].button-secondary,
input[type="submit"].button2,
input[type="button"].btn-secondary,
input[type="button"].button-secondary,
input[type="button"].button2 {
  background: #f5f5f5;
  color: #424242;
  border: 1px solid var(--border-color);
  padding: 11px 23px;
  text-decoration: none;
}

.btn-secondary:hover, .button-secondary:hover, .button2:hover,
a.btn-secondary:hover, a.button-secondary:hover, a.button2:hover,
input[type="submit"].btn-secondary:hover,
input[type="submit"].button-secondary:hover,
input[type="submit"].button2:hover {
  background: #e8e8e8;
  border-color: #bdbdbd;
  color: #424242;
  text-decoration: none;
}

/* Danger/delete button variant */
.btn-danger, .button-danger {
  background: transparent;
  color: #d32f2f;
  border: 1px solid #d32f2f;
  padding: 11px 23px;
}

.btn-danger:hover, .button-danger:hover {
  background: #d32f2f;
  color: white;
}

/* Success button variant */
.btn-success, .button-success {
  background: var(--success-color);
  color: white;
}

.btn-success:hover, .button-success:hover {
  background: #0D3D0D;
}

/* Flat/text button variant */
.btn-flat {
  background: transparent;
  color: var(--primary-color, #0851a4);
  box-shadow: none;
  border: none;
}

.btn-flat:hover {
  background: rgba(8, 81, 164, 0.08);
}

/* Large button variant */
.btn-lg {
  padding: 16px 32px;
  font-size: 1.125rem;
}

/* Full-width button */
.btn-block {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Disabled button state */
.btn:disabled, .btn.disabled,
.button:disabled, .button.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* File upload area */
.file-upload {
  border: 2px dashed #ddd;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
  background: #fafafa;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload:hover {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.file-upload input[type="file"] {
  display: none;
}

.file-upload-label {
  display: inline-block;
  padding: 8px 16px;
  background: #f5f5f5;
  color: #333;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
}

.file-upload-label:hover {
  background: #eeeeee;
  border-color: #bdbdbd;
}

.file-upload-text {
  display: block;
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

/* Drag and drop active state */
.file-upload-dragover {
  border-color: #999 !important;
  background: var(--background-color) !important;
}

/* Material Design Loading indicator */
.progress {
  width: 100%;
  height: 4px;
  background-color: rgba(25, 118, 210, 0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}

.indeterminate {
  background-color: var(--primary-color);
  height: 100%;
  width: 100%;
  animation: indeterminate 2s infinite ease-in-out;
  transform-origin: left;
}

@keyframes indeterminate {
  0% {
    transform: translateX(-100%) scaleX(1);
  }
  40% {
    transform: translateX(0%) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(1);
  }
}

/* Material Design Data Table - Mobile-first */
.data-section table {
  border-spacing: 0;
  font-size: 0.875rem;
  width: 100%;
  border-collapse: collapse;
}

.data-section th {
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.75rem 0.25rem;
  text-align: left;
}

.data-section th:nth-child(2),
.data-section th:nth-child(3),
.data-section th:nth-child(4) {
  min-width: 120px;
}

.data-section th:nth-child(2) {
  min-width: 100px; /* Totals column */
}

.data-section td {
  vertical-align: top;
  padding: 0.75rem 0.25rem;
  text-align: left;
}

.data-section tr:hover {
  background-color: rgba(25, 118, 210, 0.04);
}

/* Mobile-first responsive design - matching WordPress theme approach */

/* Mobile styles (default) */
/* NOTE: .form-row already defined above (~line 2506) */

.data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

.market-share-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.top-models-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.year-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Tablet and larger (768px+) */
@media (min-width: 769px) {
  /* NOTE: .form-row responsive already defined above (~line 2512) */

  .data-grid {
    grid-template-columns: 1fr 1fr;
  }

  .market-share-grid {
    grid-template-columns: 1fr 1fr;
  }

  .top-models-grid {
    grid-template-columns: 1fr 1fr;
  }

  .data-section table {
    font-size: 1rem;
  }

  .data-section th,
  .data-section td {
    padding: 1rem 0.5rem;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .year-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Dark mode styles for forms */
.dark-mode label,
.dark-mode .form-group label {
  color: var(--text-primary);
}

.dark-mode .form-group select {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .form-group select:hover {
  border-color: var(--divider-color);
}

.dark-mode .form-group select:focus {
  border-color: var(--primary-light);
}

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="url"],
.dark-mode input[type="number"],
.dark-mode input[type="search"],
.dark-mode input[type="tel"],
.dark-mode input[type="password"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode textarea,
.dark-mode select {
  background-color: var(--surface-color);
  color: var(--text-primary);
  border-color: var(--divider-color);
}

.dark-mode input[type="date"],
.dark-mode input[type="time"] {
  color-scheme: dark;
}

.dark-mode select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  color-scheme: dark;
}

.dark-mode input[type="text"]:hover,
.dark-mode input[type="email"]:hover,
.dark-mode input[type="url"]:hover,
.dark-mode input[type="number"]:hover,
.dark-mode input[type="search"]:hover,
.dark-mode input[type="tel"]:hover,
.dark-mode input[type="password"]:hover,
.dark-mode input[type="date"]:hover,
.dark-mode input[type="time"]:hover,
.dark-mode textarea:hover,
.dark-mode select:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px 0 rgba(255,255,255,0.12);
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="url"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode input[type="tel"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="time"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
}

.dark-mode button,
.dark-mode input[type="submit"],
.dark-mode input[type="button"],
.dark-mode .btn,
.dark-mode .button {
  background: transparent;
  color: var(--primary-light);
  border: 1px solid var(--primary-light);
}

.dark-mode button:hover,
.dark-mode input[type="submit"]:hover,
.dark-mode input[type="button"]:hover,
.dark-mode .btn:hover,
.dark-mode .button:hover {
  background: rgba(100, 181, 246, 0.12);
  color: var(--primary-light);
  border-color: var(--primary-light);
}

/* Icon-only toggles (hamburger, dark-mode, search) are not primary buttons —
   the broad `.dark-mode button` rule above must not give them a border. */
.dark-mode .mega-menu-toggle,
.dark-mode .dark-mode-toggle,
.dark-mode .search-toggle,
.dark-mode .mega-menu-toggle:hover,
.dark-mode .dark-mode-toggle:hover,
.dark-mode .search-toggle:hover,
.dark-mode button.rating,
.dark-mode button.rating:hover {
  border: none;
  background: transparent;
}

.dark-mode .btn-secondary,
.dark-mode .button-secondary,
.dark-mode .button2,
.dark-mode a.btn-secondary,
.dark-mode a.button-secondary,
.dark-mode a.button2,
.dark-mode input[type="submit"].btn-secondary,
.dark-mode input[type="submit"].button-secondary,
.dark-mode input[type="submit"].button2 {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark-mode .btn-secondary:hover, .dark-mode .button-secondary:hover, .dark-mode .button2:hover,
.dark-mode a.btn-secondary:hover, .dark-mode a.button-secondary:hover, .dark-mode a.button2:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--text-primary);
}

.dark-mode .btn-danger, .dark-mode .button-danger {
  color: #ef5350;
  border-color: #ef5350;
}

.dark-mode .btn-danger:hover, .dark-mode .button-danger:hover {
  background: #ef5350;
  color: white;
}

.dark-mode .btn-success, .dark-mode .button-success {
  background: #2e7d32;
}

.dark-mode .btn-success:hover, .dark-mode .button-success:hover {
  background: #1b5e20;
}

.dark-mode .btn-flat {
  color: var(--primary-light);
}

.dark-mode .btn-flat:hover {
  background: rgba(100, 181, 246, 0.12);
}

.dark-mode .file-upload {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
}

.dark-mode .file-upload-label {
  background: var(--surface-color);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.dark-mode .file-upload-label:hover {
  background: #3d3d3d;
  border-color: var(--divider-color);
}

.dark-mode .file-upload-text {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .file-upload-dragover {
  border-color: var(--divider-color) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* =====================================================
   ALERTS & NOTIFICATIONS
   Promoted from stromtankstellen — used across sections
   ===================================================== */

.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.alert-info {
    background-color: #e3f2fd;
    border-left-color: var(--primary-color);
    color: var(--primary-dark);
}

.alert-success {
    background-color: #e8f5e9;
    border-left-color: var(--success-color);
    color: var(--success-color);
}

.alert-warning {
    background-color: #fff3e0;
    border-left-color: var(--warning-color);
    color: var(--warning-color);
}

.alert-error {
    background-color: #ffebee;
    border-left-color: var(--error-color);
    color: var(--error-color);
}

.alert strong {
    font-weight: 600;
}

/* =====================================================
   RATING STARS
   Promoted from stromtankstellen — used across sections
   ===================================================== */

.rating-stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.rating-stars svg {
    width: 16px;
    height: 16px;
}

.rating-stars .filled {
    fill: #FFC107;
}

.rating-stars .empty {
    fill: #E0E0E0;
}

/* =====================================================
   PHOTO GALLERY
   Promoted from stromtankstellen — reusable grid gallery
   ===================================================== */

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 769px) {
    .photo-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

.photo-gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

.photo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photo-gallery-item:hover img {
    transform: scale(1.05);
}

/* =====================================================
   AUTOCOMPLETE DROPDOWN
   Promoted from stromtankstellen — generic autocomplete
   ===================================================== */

.autocomplete-container {
    position: relative;
}

.autocomplete-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 1px solid var(--divider-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

.autocomplete-content li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--divider-color);
    transition: background-color 0.2s;
}

.autocomplete-content li:last-child {
    border-bottom: none;
}

.autocomplete-content li:hover,
.autocomplete-content li.selected {
    background-color: rgba(8, 81, 164, 0.08);
}

.autocomplete-content .highlight {
    font-weight: 600;
    color: var(--primary-color);
}

/* =====================================================
   UTILITY CLASSES
   Promoted from stromtankstellen — generic helpers
   ===================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

.w-100 { width: 100%; }

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

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* =====================================================
   RESPONSIVE HELPERS
   Promoted from stromtankstellen — generic visibility
   ===================================================== */

.hide-mobile {
    display: none;
}

@media (min-width: 769px) {
    .hide-mobile {
        display: block;
    }

    .hide-desktop {
        display: none;
    }
}

/* ==========================================================================
   Shared Control Panel Primitives
   Used by forum UCP/MCP and reusable control-panel screens.
   ========================================================================== */

.cp-main-title {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.cp-tabs {
    border-bottom: 2px solid var(--divider-color);
    margin-bottom: var(--spacing-md);
}

.cp-tabs-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow-x: auto;
}

@media (min-width: 769px) {
    .cp-tabs-list {
        overflow-x: visible;
    }
}

.cp-tab-item {
    margin: 0;
    display: block;
    list-style: none;
}

.cp-tab-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-short);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    margin-bottom: -2px;
}

.cp-tab-link:hover {
    color: var(--primary-color);
    background-color: var(--background-color);
}

.cp-tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.cp-content-wrapper {
    display: block;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

@media (min-width: 769px) {
    .cp-content-wrapper {
        display: flex;
        flex-direction: row;
    }
}

.cp-sidebar {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

@media (min-width: 769px) {
    .cp-sidebar {
        flex: 0 0 240px;
        width: auto;
    }
}

.cp-navigation {
    margin-bottom: var(--spacing-lg);
}

.cp-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-nav-item {
    margin: 0;
    border-bottom: 1px solid var(--divider-color);
}

.cp-nav-item:first-child {
    border-top: 1px solid var(--divider-color);
}

.cp-nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-short);
    border-left: 3px solid transparent;
    font-size: 14px;
}

.cp-nav-link:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    padding-left: calc(var(--spacing-md) - 3px);
}

.cp-nav-link.active {
    background-color: var(--background-color);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
    padding-left: calc(var(--spacing-md) - 3px);
}

.cp-nav-link span {
    display: block;
}

.cp-main-content {
    flex: 1;
    min-width: 0;
}

.cp-page {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.cp-page-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.cp-page-header p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    width: 100%;
}

.cp-section {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-top: var(--spacing-md);
}

.cp-section-header {
    padding: var(--spacing-sm) 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.cp-section-header h2,
.cp-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.cp-section-heading {
    margin: 0 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--divider-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cp-help-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

/* Tab panel visibility */
.cp-tab-panel {
    display: none;
    padding: 1rem;
}
.cp-tab-panel.active {
    display: block;
}

/* Tab panel content */
.cp-tab-panel-content {
    position: relative;
}

/* Refresh/action button in tab panel header */
.cp-tab-panel-action {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.cp-tab-panel-action:hover {
    color: var(--primary-color);
}

/* List item divider */
.cp-item-divider {
    border-bottom: 1px solid var(--divider-color);
    margin: 0.5rem 0;
}

/* Delete button for list items */
.cp-item-delete {
    float: right;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.cp-item-delete:hover {
    color: var(--accent-color);
}
.dark-mode .cp-item-delete {
    background: none;
    border: none;
    color: #666;
}
.dark-mode .cp-item-delete:hover {
    background: none;
    color: #ff6b7a;
}
.cp-item-delete svg {
    width: 20px;
    height: 20px;
}

/* Metadata label in list items */
.cp-item-meta-label {
    font-size: 0.8rem;
    line-height: 1rem;
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
    display: inline-block;
}


/* Disabled/inactive badge */
.cp-badge-disabled {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    margin-left: 0.5rem;
}

/* Chargelogs show-more button */
.cp-show-more {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: none;
    border: 1px solid var(--divider-color);
    border-radius: 0.25rem;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.875rem;
}
.cp-show-more:hover {
    background: var(--bg-secondary);
}

/* Dark mode overrides */
.dark-mode .cp-badge-disabled {
    background: var(--bg-secondary);
}
.dark-mode .cp-show-more {
    border-color: var(--divider-color);
}
.dark-mode .cp-show-more:hover {
    background: var(--bg-secondary);
}

/* Control panel content with action button */
.cp-panel-with-action {
    position: relative;
}

/* Form row with auto-sized trailing column (e.g. filter + sort + button) */
@media (min-width: 769px) {
    .form-row-auto-end {
        grid-template-columns: 1fr 1fr auto;
        align-items: flex-end;
    }
}

/* Form row with three equal columns (e.g. search + sort + status filter) */
@media (min-width: 769px) {
    .form-row-three {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Control panel table */
.cp-table {
    width: 100%;
    border-collapse: collapse;
}
.cp-table th,
.cp-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--divider-color);
}
.cp-table thead th {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cp-table tbody tr:hover {
    background-color: var(--background-color);
}

/* Empty state message */
.cp-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

/* Loading spinner for AJAX panels */
.cp-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

/* =====================================================
   FORM NOTICE
   Inline hint/callout for forms (blue, left-bordered)
   ===================================================== */

.form-notice {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    background-color: #e3f2fd;
    border-left: 4px solid var(--primary-color);
    color: var(--primary-dark);
}

.form-notice a {
    color: var(--primary-color);
    font-weight: 500;
}

.dark-mode .form-notice {
    background-color: rgba(100, 181, 246, 0.1);
    border-left-color: var(--primary-light);
    color: var(--primary-light);
}

/* =====================================================
   FORM BACK LINK
   "← Back to entry" link below forms
   ===================================================== */

.form-back-link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.form-back-link:hover {
    color: var(--primary-color);
}

/* =====================================================
   BREADCRUMBS (reusable primitive)
   ===================================================== */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    list-style: none;
    margin: 0;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

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

.breadcrumbs li + li::before {
    content: "\203A";
    color: var(--text-disabled);
    margin-right: 0.1rem;
}

.breadcrumbs li:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

/* =====================================================
   ICON-STAT (icon + value + label stacked — reusable)
   ===================================================== */
.icon-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.icon-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(8, 81, 164, 0.08);
    color: var(--primary-color);
    flex-shrink: 0;
}

.icon-stat__icon svg {
    width: 20px;
    height: 20px;
}

.icon-stat__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.icon-stat__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.25;
}

.dark-mode .icon-stat__icon {
    background: rgba(100, 181, 246, 0.16);
    color: var(--primary-light);
}

/* =====================================================
   CIRCULAR PROGRESS (SVG ring — reusable)
   ===================================================== */
.circular-progress {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
}

.circular-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circular-progress__track {
    fill: none;
    stroke: var(--divider-color);
    stroke-width: 8;
}

.circular-progress__fill {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.circular-progress__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
}

.circular-progress__value {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.circular-progress__suffix {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Print Styles */
@media print {
    .site-header,
    .site-footer,
    .navigation {
        display: none;
    }

    body {
        background: none;
        color: #000;
    }

    .container {
        max-width: none;
        padding: 0;
    }
}

/* =====================================================
   MAP CARD - shared primitive
   Wraps a map with a floating overlay toolbar (top) and
   a category strip (bottom) in a single rounded card.
   ===================================================== */
.map-card {
    position: relative;
    background: var(--surface-color);
    border-radius: 4px;
    box-shadow: var(--card-elevation);
    overflow: visible;
    margin: 0 0 1rem;
}
.map-card > #map_wrapper {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

/* Top toolbar floats on top of the map. Children carry their own
   surface; the toolbar itself has no background. */
.map-card__toolbar--top {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    pointer-events: none;
}
.map-card__toolbar--top > * {
    pointer-events: auto;
}

.map-card__toolbar--bottom {
    border-top: 1px solid var(--divider-color);
    background: var(--surface-color);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.map-card > #map_wrapper,
.map-card > .map_wrapper {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.dark-mode .map-card {
    background: var(--surface-color);
}


/* ============================================================
   COVERAGE / CHOROPLETH MAPS (shared by statistik + anbieter)
   Uses stat-report-* names for parity with existing statistik
   markup. Section-specific overrides (e.g. card padding) can
   still live in section CSS.
   ============================================================ */

.stat-report-region-card {
    padding: 1rem 0;
}

.stat-report-region-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    line-height: 1.25;
}

.stat-report-region-map {
    align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    min-height: 0;
    width: 100%;
}

.stat-report-region-svg {
    display: block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: 410px;
}

.stat-report-europe-svg {
    width: 460px;
}

.stat-report-country-region-svg {
    width: 430px;
}

.stat-report-region-state {
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.stat-report-region-state.is-level-0 {
    opacity: 0.72;
}

.stat-report-region-rank-list {
    border-top: 1px solid var(--divider-color);
    margin: 0.75rem 0 0;
    padding: 0.75rem 0 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.stat-report-region-rank-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.stat-report-region-rank-list strong {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.stat-report-empty-state {
    color: var(--text-secondary);
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0 0;
}

.stat-report-empty-state strong {
    color: var(--primary-color);
    font-size: 1.35rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .stat-report-region-map {
        margin: 0 auto;
        max-width: 360px;
    }
    .stat-report-region-svg {
        width: min(100%, 340px);
    }
}

/* Section footer CTA: shared component (stromtankstellen, anbieter, garage, ...).
   Originally lived in stromtankstellen/css/style.css; moved here once a third
   section needed it. Artwork still in /stromtankstellen/img/. */
.strom-footer-cta {
    margin: 2rem 0 1rem;
    --strom-footer-cta-bg: #f4f8fd;
}

.strom-footer-cta__content {
    display: grid;
    gap: 1rem;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 4px;
    background: var(--strom-footer-cta-bg);
    box-shadow: var(--card-elevation);
}

.strom-footer-cta__copy {
    padding: 1.25rem;
}

.strom-footer-cta__copy h2,
.strom-footer-cta__title {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-wrap: balance;
}

.strom-footer-cta p:not(.strom-footer-cta__title) {
    max-width: 44rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.strom-footer-cta__stats {
    display: grid;
    gap: 0.85rem;
    margin: 1.15rem 0;
}

.strom-footer-cta__stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: var(--text-primary);
}

.strom-footer-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
}

.strom-footer-cta__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.strom-footer-cta__stat strong,
.strom-footer-cta__stat small {
    display: block;
}

.strom-footer-cta__stat strong {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.strom-footer-cta__stat small {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.25;
}

.strom-footer-cta__button {
    width: 100%;
    justify-content: center;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    margin-top: 0.5rem;
    padding: 11px 23px;
}

.strom-footer-cta__button:hover,
.strom-footer-cta__button:focus {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Opt-in modifier: hide the CTA hero image on mobile so the data placeholder
   <img> never loads anything. Used by /garage/ (the 430 KB asset was the LCP
   blocker on its single-entry pages). */
.strom-footer-cta__media--desktop-only {
    display: none;
}
@media (min-width: 900px) {
    .strom-footer-cta__media--desktop-only {
        display: flex;
    }
}

.strom-footer-cta__media {
    display: flex;
    align-items: end;
    justify-content: center;
    position: relative;
    min-height: 10rem;
    padding: 0 0.5rem 0.5rem;
}

.strom-footer-cta__media img {
    display: block;
    width: 100%;
    max-width: 50rem;
    max-height: 17rem;
    object-fit: contain;
    object-position: center bottom;
}

.dark-mode .strom-footer-cta__content {
    border-color: rgba(100, 181, 246, 0.22);
    background: #182233;
}

.dark-mode .strom-footer-cta {
    --strom-footer-cta-bg: #182233;
}

.dark-mode .strom-footer-cta__icon {
    background: rgba(100, 181, 246, 0.14);
    color: var(--primary-light);
}

.dark-mode .strom-footer-cta__button {
    background: transparent;
    color: var(--primary-light);
    border-color: rgba(100, 181, 246, 0.45);
}

.dark-mode .strom-footer-cta__button:hover,
.dark-mode .strom-footer-cta__button:focus {
    background: rgba(100, 181, 246, 0.12);
    border-color: var(--primary-light);
    color: var(--primary-light);
}

/* Default media-fade ends in transparent #f4f8fd (light bg). In dark mode the
   gradient would interpolate from dark navy to translucent light-blue, which
   reads as a bright band between the copy and the image. Fade to the
   transparent dark bg AND widen the fade to cover the image's baked-in light
   left edge. The image itself is also slightly dimmed/desaturated so the
   white-blue backdrop doesn't clash with the navy card. */
.dark-mode .strom-footer-cta__media::before {
    width: 16rem;
    background: linear-gradient(90deg, var(--strom-footer-cta-bg) 0%, rgba(24, 34, 51, 0.85) 35%, rgba(24, 34, 51, 0) 100%);
}
.dark-mode .strom-footer-cta__media {
    padding: 0;
}
.dark-mode .strom-footer-cta__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: brightness(0.82) saturate(0.9);
}

@media (min-width: 640px) {
    .strom-footer-cta__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .strom-footer-cta__button {
        width: auto;
    }
}

@media (min-width: 900px) {
    .strom-footer-cta {
        margin-top: 2.5rem;
    }

    .strom-footer-cta__content {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.95fr);
        align-items: stretch;
    }

    .strom-footer-cta__copy {
        display: flex;
        flex-direction: column;
        padding: 1.5rem 1.75rem;
    }

    /* Title + body sit at the top of the column; the button paragraph gets
       margin-top: auto so it docks to the bottom of the card, aligning with
       the image baseline on the right. */
    .strom-footer-cta__copy > p:last-child {
        margin-top: auto;
        padding-top: 1rem;
    }

    .strom-footer-cta__media::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -25px;
        z-index: 1;
        width: 9rem;
        pointer-events: none;
        background: linear-gradient(90deg, var(--strom-footer-cta-bg), rgba(244, 248, 253, 0));
    }

    .strom-footer-cta__media img {
        width: 112%;
        max-width: 54rem;
        max-height: 18rem;
        object-position: right bottom;
    }
}