/**
 * adhocladen.de Main Stylesheet
 * Based on design mockup
 */

:root {
    --color-primary: #00856e;
    --color-primary-dark: #006b5a;
    --color-primary-text: #006b5a;
    --color-secondary: #FF6B6B;
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-text: #1A1A1A;
    --color-text-secondary: #595959;
    --color-border: #BBBBBB;
    --color-shadow: rgba(0, 0, 0, 0.08);
    --color-price-green: #006b5a;
    --color-price-yellow: #8B6914;
    --color-price-orange: #A34200;
    --color-price-red: #B91C1C;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 8px var(--color-shadow);
    --shadow-md: 0 4px 16px var(--color-shadow);
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    overflow-x: hidden;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

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

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   Accessibility
   ============================================ */

/* Visually hidden but accessible to screen readers */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    padding: 12px 24px;
    background: var(--color-text);
    color: white;
    font-weight: 600;
    border-radius: var(--radius-sm);
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Global focus styles - keyboard navigation */
:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Focus-visible for modern browsers (only show on keyboard focus) */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Specific element focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* High contrast focus for buttons and links */
.btn:focus-visible,
.filter-chip:focus-visible,
.filter-toggle:focus-visible,
.map-btn:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 133, 110, 0.3);
}

/* Station card focus */
.station-card-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
    border-radius: var(--radius-md);
}

/* Search dropdown item focus */
.search-dropdown-item:focus-visible {
    background: var(--color-bg);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Range slider focus */
.range-slider input[type="range"]:focus-visible {
    outline: none;
}

.range-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--color-primary);
}

.range-slider input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px white, 0 0 0 5px var(--color-primary);
}

/* ============================================
   Layout
   ============================================ */

.main-content {
    min-height: calc(100vh - 160px);
}

/* ============================================
   Header
   ============================================ */

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.5px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.logo-tagline {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Header Search */
.header-search {
    order: 3;
    width: 100%;
    margin-top: 12px;
}

.search-form {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    background: var(--color-bg);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.search-input::placeholder {
    color: var(--color-text-secondary);
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-top: 4px;
    display: none;
    z-index: 100;
    max-height: min(70vh, 440px);
    overflow-y: auto;
}

.search-dropdown.open {
    display: block;
}

.search-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.search-dropdown-item:hover,
.search-dropdown-item:focus-visible {
    background: var(--color-bg);
    text-decoration: none;
}

.search-group {
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
}

.search-group:last-child {
    border-bottom: none;
}

.search-group-title {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-item-name {
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.2;
}

.search-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.25;
}

.search-icon-city,
.search-icon-operator,
.search-icon-station {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    color: var(--color-surface);
}

.search-icon-city {
    background: var(--color-primary);
}

.search-icon-operator {
    background: #6366f1;
}

.search-icon-station {
    background: #f59e0b;
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Header Nav */
.header-nav {
    display: none;
    gap: 8px;
}

.header-nav.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 4;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}

.nav-link {
    padding: 8px 16px;
    color: var(--color-text);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.nav-link:hover {
    background: var(--color-bg);
    text-decoration: none;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: all 0.2s;
}

/* ============================================
   Hero Section
   ============================================ */

.hero {
    background: linear-gradient(135deg, rgba(0, 133, 110, 0.08), rgba(0, 107, 90, 0.04));
    padding: 32px 0 40px;
    text-align: center;
}

.hero h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 16px;
}

.hero-subtitle {
    font-size: 18px;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.hero-search {
    max-width: 600px;
    margin: 0 auto 40px;
}

.search-form-large .search-input {
    padding: 16px 16px 16px 52px;
    font-size: 16px;
    border-radius: var(--radius-lg);
}

.search-form-large .search-icon {
    left: 18px;
}

.search-button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.search-button:hover {
    background: var(--color-primary-dark);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
}

.stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

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

.section {
    margin: 32px 0 0;
}

.section-alt {
    background: var(--color-surface);
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text);
}

/* ============================================
   City Grid
   ============================================ */

.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.city-grid-large {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.city-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.city-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    text-decoration: none;
}

.city-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.city-stats {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.city-stations {
    color: var(--color-text-secondary);
}

.city-price {
    font-family: var(--font-mono);
    color: var(--color-primary);
    font-weight: 600;
}

/* ============================================
   Steps Grid (How it works)
   ============================================ */

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.step {
    text-align: center;
    padding: 32px 24px;
}

.step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    margin: 0 auto 16px;
}

.step h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.step p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ============================================
   Page Header
   ============================================ */

.page-header {
    background: var(--color-surface);
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.page-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

/* Stats Bar */
.city-stats-bar,
.operator-stats-bar {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-item .stat-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
}

.stat-item .stat-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Power class navigation tabs */
.power-class-tabs {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.power-class-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.2s;
}

.power-class-tab:hover {
    border-color: var(--color-primary);
    background: rgba(0, 133, 110, 0.08);
    color: var(--color-primary);
}

.power-class-tab.active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: white;
}

.power-class-tab .tab-count {
    font-size: 12px;
    color: #17211f;
    opacity: 1;
}

.power-class-tab.active .tab-count {
    color: #FFFFFF;
    opacity: 1;
}

/* ============================================
   Breadcrumbs
   ============================================ */

.breadcrumbs {
    padding: 12px 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    gap: 8px;
    font-size: 13px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-item:not(:last-child)::after {
    content: '›';
    color: var(--color-text-secondary);
}

.breadcrumb-item a {
    color: var(--color-text-secondary);
}

.breadcrumb-item:last-child span {
    color: var(--color-text);
    font-weight: 500;
}

/* ============================================
   Chargepoint Stats
   ============================================ */

.cp-stats-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cp-stats-summary {
    display: flex;
    gap: 32px;
}

.cp-stats-total,
.cp-stats-avail {
    display: flex;
    flex-direction: column;
}

.cp-stats-number {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
}

.cp-stats-number.cp-available {
    color: #059669;
}

.cp-stats-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.cp-stats-card {
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.cp-stats-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cp-stats-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
}

.cp-stats-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-bg);
    margin-bottom: 10px;
}

.bar-segment {
    min-width: 2px;
    transition: width 0.3s;
}

.bar-available { background: #059669; }
.bar-charging { background: #2563EB; }
.bar-offline { background: #DC2626; }
.bar-unknown { background: #D1D5DB; }

.cp-stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-available { background: #059669; }
.dot-charging { background: #2563EB; }
.dot-offline { background: #DC2626; }

/* ============================================
   Cheapest Options
   ============================================ */

.cheapest-section {
    /*padding-bottom: 0;*/
}

.cheapest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.cheapest-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.cheapest-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    text-decoration: none;
}

.cheapest-power {
    display: flex;
    align-items: center;
    gap: 8px;
}

.power-class {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.power-ac { background: #E0F2FE; color: #0369A1; }
.power-dc { background: #FEF3C7; color: #92400E; }
.power-hpc { background: #FCE7F3; color: #9D174D; }

.power-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.cheapest-price {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
}

.cheapest-station {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cheapest-operator {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cheapest-name {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   City Layout (Sidebar + Map)
   ============================================ */

.city-content {
    /*padding: 60px 0;*/
}

.city-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
    min-height: 600px;
}

.city-map-container {
    flex: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.city-map {
    height: 100%;
    min-height: 600px;
}

.city-sidebar {
    width: 100%;
    flex-shrink: 0;
}

/* ============================================
   Filter Bar
   ============================================ */

.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.filter-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.filter-chip:hover {
    border-color: var(--color-primary);
    background: rgba(0, 133, 110, 0.08);
}

.filter-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ============================================
   Station List & Cards
   ============================================ */

.station-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
}

.station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.station-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: border-color 0.2s, transform 0.2s;
}

.station-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.station-card-link {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: inherit;
}

.station-card-link:hover {
    text-decoration: none;
}

.station-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.station-operator-name {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.station-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin: 4px 0;
}

.station-card-address {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.station-distance {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.station-card-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 12px;
}

/* Plug Badges */
.station-plugs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.plug-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-bg);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

.plug-ccs { background: #E3F2FD; color: #0B4FA7; }
.plug-type2 { background: #E8F5E9; color: #1B5E20; }
.plug-chademo { background: #FFF3E0; color: #9A3D00; }

.power-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Station Price Box */
.station-price-box {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-align: right;
}

.station-price-box .price-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
}

/* Price colors - WCAG AA compliant, shared across cards, popups, and map sidebar */
.price-green,
.popup-price.price-green,
.karte-station-price.price-green {
    --price-bg: rgba(0, 133, 110, 0.12);
    --price-fg: var(--color-price-green, #006b5a);
}

.price-yellow,
.popup-price.price-yellow,
.karte-station-price.price-yellow {
    --price-bg: rgba(139, 105, 20, 0.12);
    --price-fg: var(--color-price-yellow, #8B6914);
}

.price-orange,
.popup-price.price-orange,
.karte-station-price.price-orange {
    --price-bg: rgba(163, 66, 0, 0.12);
    --price-fg: var(--color-price-orange, #A34200);
}

.price-red,
.popup-price.price-red,
.karte-station-price.price-red {
    --price-bg: rgba(185, 28, 28, 0.12);
    --price-fg: var(--color-price-red, #B91C1C);
}

.price-green,
.price-yellow,
.price-orange,
.price-red,
.popup-price.price-green,
.popup-price.price-yellow,
.popup-price.price-orange,
.popup-price.price-red,
.karte-station-price.price-green,
.karte-station-price.price-yellow,
.karte-station-price.price-orange,
.karte-station-price.price-red {
    background: var(--price-bg);
}

.price-green .price-value,
.price-yellow .price-value,
.price-orange .price-value,
.price-red .price-value,
.popup-price.price-green .popup-price-value,
.popup-price.price-yellow .popup-price-value,
.popup-price.price-orange .popup-price-value,
.popup-price.price-red .popup-price-value,
.karte-station-price.price-green,
.karte-station-price.price-yellow,
.karte-station-price.price-orange,
.karte-station-price.price-red {
    color: var(--price-fg);
}

.station-price-box.price-unknown {
    background: var(--color-bg);
}

.station-price-box.price-unknown .price-value {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* ============================================
   Pagination
   ============================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 4px;
    flex-wrap: wrap;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-link:hover:not(.active):not(.disabled) {
    border-color: var(--color-primary);
    background: rgba(0, 133, 110, 0.08);
    color: var(--color-primary);
}

.pagination-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    cursor: default;
}

.pagination-link.disabled {
    color: #4D5B58;
    background: #F6FAF9;
    opacity: 1;
    cursor: default;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.pagination-prev,
.pagination-next {
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .pagination {
        gap: 4px;
    }
    .pagination-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }
    .pagination-prev,
    .pagination-next {
        font-size: 12px;
    }
}

/* ============================================
   Station Detail Page
   ============================================ */

.station-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0;
}

.station-info-panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: 16px;
    min-width: 0;
}

.station-header {
    margin-bottom: 24px;
}

.station-amenity-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.amenity-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.amenity-badge--drive {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.amenity-badge--shop {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.amenity-badge--eat {
    background: rgba(224, 120, 50, 0.1);
    color: #c05621;
}

.amenity-badge--sleep {
    background: rgba(109, 90, 205, 0.1);
    color: #5b42b8;
}

.amenity-badge--cafe {
    background: rgba(180, 83, 9, 0.1);
    color: #92400e;
}

.amenity-badge--camp {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
}

a.amenity-badge:hover {
    text-decoration: none;
    filter: brightness(0.9);
}

.colocated-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.colocated-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border);
}

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

.colocated-item:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.colocated-operator {
    font-weight: 600;
    min-width: 120px;
}

.colocated-name {
    flex: 1;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.colocated-price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}

.station-price-box.price-green,
.station-price-box.price-yellow,
.station-price-box.price-orange,
.station-price-box.price-red {
    display: inline-block;
    padding: 12px 20px;
}

.station-price-box .price-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}

.station-price-box .price-value {
    font-size: 24px;
}

/* Station Header Badges (price + score side by side) */
.station-header-badges {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Ad-hoc Score Badge (station detail page) */
a.adhoc-score-badge {
    text-decoration: none;
}

.adhoc-score-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    min-width: 64px;
}

.adhoc-score-badge .score-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
}

.adhoc-score-badge .score-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: block;
    margin-top: 2px;
}

/* Ad-hoc Score Compact (station cards) */
.station-card-scores {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adhoc-score-compact {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Score color variants */
.score-green { background: rgba(0, 133, 110, 0.12); }
.score-green .score-value,
.score-green .score-num { color: #005A4B; font-weight: 800; }

.score-yellow-green { background: rgba(101, 163, 13, 0.12); }
.score-yellow-green .score-value,
.score-yellow-green .score-num { color: #4D7C0F; }

.score-yellow { background: rgba(202, 138, 4, 0.12); }
.score-yellow .score-value,
.score-yellow .score-num { color: var(--color-price-yellow, #A16207); }

.score-orange { background: rgba(194, 65, 12, 0.12); }
.score-orange .score-value,
.score-orange .score-num { color: var(--color-price-orange, #A34200); }

.score-gray { background: var(--color-bg); }
.score-gray .score-value,
.score-gray .score-num { color: var(--color-text-secondary); }

.adhoc-score-compact .score-num {
    color: #17211f;
    font-weight: 900;
}

/* Station Meta */
.station-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.meta-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.meta-link {
    color: var(--color-primary);
}

/* Chargepoint Table */
.chargepoint-section {
    margin-top: 24px;
}

.chargepoint-section h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-available {
    background: rgba(0, 133, 110, 0.12);
    color: #006b5a;
}

.status-occupied {
    background: rgba(255, 107, 107, 0.12);
    color: #FF6B6B;
}

.status-offline {
    background: var(--color-bg);
    color: var(--color-text-secondary);
}

.status-since {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-left: 6px;
    white-space: nowrap;
}

/* Station Map */
.station-map-container {
    position: static;
    min-width: 0;
}

.station-map {
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: 16px;
}

.station-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

/* ============================================
   Operator Grid
   ============================================ */

.operator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.operator-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    text-decoration: none;
    transition: all 0.2s;
}

.operator-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.operator-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.operator-stats {
    font-size: 13px;
    color: var(--color-text-secondary);
    display: flex;
    gap: 12px;
}

.operator-payment-info {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.operator-actions {
    margin-top: 16px;
}

/* ============================================
   FAQ
   ============================================ */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item summary {
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 20px;
    color: var(--color-text-secondary);
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    padding: 0 20px 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ============================================
   Error Page
   ============================================ */

.error-page {
    padding: 80px 0;
    text-align: center;
}

.error-content {
    max-width: 500px;
    margin: 0 auto;
}

.error-code {
    font-family: var(--font-mono);
    font-size: 72px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 16px;
}

.error-page h1 {
    font-size: 28px;
    margin-bottom: 12px;
}

.error-page p {
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.error-actions {
    margin-bottom: 48px;
}

.error-suggestions h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.error-suggestions ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ============================================
   Legal Pages
   ============================================ */

.legal-page {
    padding: 40px 0 80px;
}

.container-narrow {
    max-width: 800px;
}

.legal-page h1 {
    font-size: 32px;
    margin-bottom: 32px;
}

.legal-page h2 {
    font-size: 22px;
    margin: 32px 0 16px;
}

.legal-page h3 {
    font-size: 18px;
    margin: 24px 0 12px;
}

.legal-page p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}

.legal-page ul {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
    padding-left: 24px;
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 48px 0 24px;
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 12px;
}

.footer-logo .logo-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.footer-tagline {
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
}

.footer-description {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.footer-links .footer-heading {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--color-text-secondary);
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.footer-attribution a {
    color: var(--color-text-secondary);
}

.xlink-sites a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================
   Prose (article content — datenquellen, etc.)
   ============================================ */

.prose {
    max-width: 800px;
    line-height: 1.7;
    color: var(--color-text);
}

.prose h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 16px;
}

.prose h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 24px 0 12px;
}

.prose p {
    margin-bottom: 16px;
    color: var(--color-text-secondary);
}

.prose a {
    color: var(--color-primary-text);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 14px;
}

.prose table th,
.prose table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.prose table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-bg);
}

.prose table td strong {
    font-weight: 600;
    color: var(--color-text);
}

.prose table td {
    color: var(--color-text-secondary);
}

.prose table tbody tr:hover {
    background: rgba(0, 133, 110, 0.04);
}

/* ============================================
   Trust Pages: Methodik + Datenquellen
   ============================================ */

.trust-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 133, 110, 0.08), transparent 34%),
        linear-gradient(180deg, #F7FBFA 0%, #fff 360px);
    padding: 34px 0 72px;
}

.trust-page .container {
    max-width: 1180px;
}

.trust-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 42px;
}

.trust-hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 34px 0;
}

.trust-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.09);
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 900;
}

.trust-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #102522;
    font-size: 52px;
    line-height: 1.04;
}

.trust-hero p {
    max-width: 680px;
    margin: 16px 0 0;
    color: #4d5d5a;
    font-size: 18px;
    line-height: 1.65;
}

.trust-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.trust-proof-card,
.trust-card,
.power-method-card,
.trust-note-card,
.source-coverage-card,
.trust-table-wrap {
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(17, 35, 31, 0.07);
}

.trust-proof-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 26px;
}

.trust-proof-label {
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.trust-proof-card > strong {
    display: block;
    margin-top: 8px;
    color: #007965;
    font-family: var(--font-mono);
    font-size: 42px;
    line-height: 1;
}

.trust-proof-card > span:not(.trust-proof-label) {
    display: block;
    margin-top: 8px;
    color: var(--color-text-secondary);
    font-weight: 750;
}

.trust-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.trust-proof-grid div {
    min-width: 0;
    padding: 12px;
    border-radius: 10px;
    background: #F4FAF8;
}

.trust-proof-grid b,
.trust-proof-grid small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.trust-proof-grid b {
    color: #102522;
    font-family: var(--font-mono);
    font-size: 16px;
}

.trust-proof-grid small {
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.trust-section {
    margin-top: 44px;
}

.trust-section-head {
    max-width: 760px;
    margin-bottom: 18px;
}

.trust-section h2 {
    margin: 0;
    color: #102522;
    font-size: 30px;
    line-height: 1.15;
}

.trust-section-head p,
.trust-split p {
    margin: 10px 0 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.trust-card-grid,
.power-method-grid,
.source-coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.sources-page .trust-card-grid,
.power-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trust-card-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-card,
.power-method-card,
.source-coverage-card {
    min-width: 0;
    padding: 18px;
}

.trust-card-icon {
    display: inline-grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    padding: 0 8px;
    border-radius: 10px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.trust-card h3,
.power-method-card strong,
.trust-note-card h3 {
    margin: 14px 0 0;
    color: #102522;
    font-size: 17px;
    line-height: 1.25;
}

.trust-card p,
.power-method-card p {
    margin: 9px 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.power-method-card span {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.power-method-card-ac span {
    background: #4F8CFF;
}

.power-method-card-dc span {
    background: #FF8A1D;
}

.power-method-card-hpc span {
    background: #EA4D5A;
}

.power-method-card strong {
    display: block;
}

.trust-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
    gap: 22px;
    align-items: start;
}

.trust-note-card {
    min-width: 0;
    padding: 22px;
}

.trust-note-card ul {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.score-method-list {
    display: grid;
    gap: 10px;
}

.score-method-row {
    display: grid;
    grid-template-columns: 160px 80px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
}

.score-method-row strong {
    color: #102522;
}

.score-method-row span {
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.09);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 900;
}

.score-method-row p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.score-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.score-swatch {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 900;
}

.score-swatch-green {
    background: #00856E;
}

.score-swatch-lime {
    background: #4D7C0F;
}

.score-swatch-yellow {
    background: #A16207;
}

.score-swatch-orange {
    background: #A34200;
}

.source-coverage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.source-coverage-card span,
.source-coverage-card strong,
.source-coverage-card small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.source-coverage-card span {
    color: #102522;
    font-weight: 850;
}

.source-coverage-card strong {
    margin-top: 16px;
    color: #007965;
    font-family: var(--font-mono);
    font-size: 28px;
}

.source-coverage-card small {
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 750;
}

.trust-table-wrap {
    overflow: hidden;
}

.trust-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.trust-table th,
.trust-table td {
    padding: 15px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.trust-table tr:last-child td {
    border-bottom: 0;
}

.trust-table th {
    background: #F4FAF8;
    color: #566762;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.trust-table td {
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.trust-table td strong,
.trust-table a {
    color: var(--color-primary-text);
}

.trust-faq-list {
    display: grid;
    max-width: 860px;
    gap: 10px;
}

.trust-faq-list .faq-item {
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(17, 35, 31, 0.05);
}

@media (max-width: 920px) {
    .trust-hero,
    .trust-split {
        grid-template-columns: 1fr;
    }

    .trust-card-grid,
    .sources-page .trust-card-grid,
    .power-method-grid,
    .source-coverage-grid,
    .trust-card-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-hero h1 {
        font-size: 42px;
    }
}

@media (max-width: 640px) {
    .trust-page {
        padding: 22px 0 54px;
    }

    .trust-hero-copy {
        padding: 12px 0;
    }

    .trust-hero h1 {
        font-size: 34px;
    }

    .trust-hero p {
        font-size: 16px;
    }

    .trust-hero-actions .btn {
        width: 100%;
    }

    .trust-proof-grid,
    .trust-card-grid,
    .sources-page .trust-card-grid,
    .power-method-grid,
    .source-coverage-grid,
    .trust-card-grid-compact {
        grid-template-columns: 1fr;
    }

    .score-method-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .trust-table thead {
        display: none;
    }

    .trust-table,
    .trust-table tbody,
    .trust-table tr,
    .trust-table td {
        display: block;
        width: 100%;
    }

    .trust-table tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .trust-table tr:last-child {
        border-bottom: 0;
    }

    .trust-table td {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 0;
    }

    .trust-table td::before {
        content: attr(data-label);
        color: #5d6d69;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }
}

@media (max-width: 360px) {
    .trust-table td {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============================================
   Scrollbar
   ============================================ */

.station-list::-webkit-scrollbar,
.karte-station-list::-webkit-scrollbar {
    width: 8px;
}

.station-list::-webkit-scrollbar-track,
.karte-station-list::-webkit-scrollbar-track {
    background: transparent;
}

.station-list::-webkit-scrollbar-thumb,
.karte-station-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.station-list::-webkit-scrollbar-thumb:hover,
.karte-station-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* ============================================
   Loading State
   ============================================ */

.loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

/* ============================================
   Station Markers (Price Labels)
   ============================================ */

.station-marker {
    background: none !important;
    border: none !important;
}

.price-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid white;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.station-marker:hover .price-marker,
.station-marker.selected .price-marker {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1000 !important;
}

/* User location marker */
.user-marker {
    background: none !important;
    border: none !important;
}

.user-marker-dot {
    width: 20px;
    height: 20px;
    background: #4285F4;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* Locate control */
.locate-control {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

.locate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-text);
}

.locate-btn:hover {
    color: var(--color-primary);
}

/* ============================================
   Marker Clusters
   ============================================ */

.marker-cluster {
    background: none !important;
    border: none !important;
}

.cluster-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-family: var(--font-mono);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 3px solid white;
}

.cluster-small {
    width: 40px;
    height: 40px;
    font-size: 12px;
}

.cluster-medium {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

.cluster-large {
    width: 56px;
    height: 56px;
    font-size: 16px;
}

/* ============================================
   Station Popups
   ============================================ */

.station-popup .leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
    padding: 0;
    box-shadow: var(--shadow-md);
}

.station-popup .leaflet-popup-content {
    margin: 0;
    min-width: 220px;
}

.station-popup .leaflet-popup-tip {
    background: var(--color-surface);
}

.popup-content {
    padding: 16px;
}

.popup-header {
    margin-bottom: 8px;
}

.popup-operator {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.popup-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.popup-address {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.popup-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.popup-connector {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    background: var(--color-bg);
    border-radius: 4px;
    color: var(--color-text);
}

.popup-power {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    background: var(--color-bg);
    border-radius: 4px;
    color: var(--color-text-secondary);
}

.popup-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.popup-price.price-unknown { background: var(--color-bg); }

.popup-price-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.popup-price-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
}

.popup-price.price-unknown .popup-price-value { color: var(--color-text-secondary); }

.popup-link,
.leaflet-popup-content .popup-link {
    display: block;
    text-align: center;
    padding: 8px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.popup-link:hover,
.leaflet-popup-content .popup-link:hover {
    background: var(--color-primary-dark);
    color: #fff;
    text-decoration: none;
}

/* ============================================
   Karte Page - Sidebar + Map Layout
   ============================================ */

.karte-container {
    display: flex;
    height: 100vh;
}

/* Sidebar: mobile-first — top bar with search + filters, station list toggled */
.karte-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    z-index: 1001;
    flex-shrink: 0;
}

.karte-sidebar .karte-logo {
    display: none;
}

.karte-sidebar-header {
    padding: 10px 12px;
    border-bottom: none;
}

/* Logo in sidebar */
.karte-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
}

.karte-logo:hover {
    text-decoration: none;
}

.karte-logo-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

.karte-logo-text h1,
.karte-logo-title {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    margin: 0;
}

.karte-logo-text p {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    margin-bottom: 0;
}

.karte-sidebar-header .search-box {
    position: relative;
}

.karte-sidebar-header .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.karte-sidebar-header .search-input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    background: var(--color-bg);
}

.karte-sidebar-header .search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.karte-sidebar-header .search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    padding: 4px 0;
}

.karte-sidebar-header .search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.karte-sidebar-header .search-item:hover {
    background: var(--color-bg);
}

.karte-sidebar-header .search-item .search-item-name {
    font-weight: 500;
}

.karte-sidebar-header .search-item .search-item-meta {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-left: 12px;
    white-space: nowrap;
}

.karte-filters {
    padding: 6px 12px 10px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.karte-advanced-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.karte-advanced-filters .filter-slider {
    flex: 1 1 100%;
    min-width: 0;
}

.karte-station-list {
    display: none;
    overflow-y: auto;
    padding: 8px 12px;
    max-height: 50vh;
}

.karte-sidebar.open .karte-station-list {
    display: block;
}

/* Station cards in sidebar */
.karte-station-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s;
}

.karte-station-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.karte-station-card.selected {
    border-color: var(--color-primary);
    background: rgba(0, 133, 110, 0.04);
}

.karte-station-header {
    margin-bottom: 8px;
}

.karte-station-info {
    flex: 1;
}

.karte-station-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 4px;
}

.karte-station-address {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.karte-station-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.karte-station-power {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 4px 10px;
    border-radius: 6px;
}

.karte-station-price {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

.karte-station-price.price-unknown { background: var(--color-bg); color: var(--color-text-secondary); }

.karte-station-score {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-left: auto;
}

/* Map wrapper (flex: 1) */
.karte-map-wrapper {
    flex: 1;
    position: relative;
    background: #E8EDF2;
}

.karte-map {
    width: 100%;
    height: 100%;
}

/* Map controls (right side) */
.karte-map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.map-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    color: var(--color-text);
    transition: all 0.2s;
}

.map-btn:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Mobile toggle (visible on mobile, hidden on desktop) */
.karte-mobile-toggle {
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}

.karte-mobile-toggle:hover {
    background: var(--color-primary);
    color: white;
}

.loading-text,
.no-results {
    text-align: center;
    padding: 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* ============================================
   Responsive (mobile-first: min-width)
   ============================================ */

/* Old max-width:768px rules moved to base styles above */

/* ============================================
   Range Sliders
   ============================================ */

.filter-advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.filter-slider {
    flex: 1;
    min-width: 200px;
}

.filter-slider label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 8px;
}

.filter-slider label span {
    font-family: var(--font-mono);
    color: var(--color-primary);
}

.range-slider {
    position: relative;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    margin: 16px 0;
}

.range-slider-track {
    position: absolute;
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
}

.range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 8px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s;
}

.range-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ============================================
   Payment Badges (Station Detail)
   ============================================ */

.payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--color-bg-alt, #f0f4f8);
    color: var(--color-text);
    border: 1px solid var(--color-border, #e2e8f0);
}

.payment-badge-credit_card,
.payment-badge-ec_card {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

.payment-badge-plug_and_charge {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
}

.payment-info-text {
    color: var(--color-text-muted, #64748b);
    font-size: 0.9rem;
    margin-top: 8px;
}

/* ============================================
   Direct Charge Button
   ============================================ */

.btn-adhoc {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-adhoc:hover {
    background: var(--color-primary-dark, #1a56db);
    color: #fff;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* ============================================
   Guide Page (So funktioniert's)
   ============================================ */

.payment-method-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 24px 0 32px;
}

.payment-method-card {
    padding: 16px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border, #e2e8f0);
    background: #fff;
}

.payment-method-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--color-bg-alt, #f0f4f8);
    color: var(--color-primary);
    margin-bottom: 12px;
}

.payment-method-card h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.payment-method-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted, #64748b);
    line-height: 1.5;
}

.guide-steps {
    counter-reset: guide-step;
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
}

.guide-steps li {
    counter-increment: guide-step;
    position: relative;
    padding: 16px 16px 16px 56px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    background: #fff;
}

.guide-steps li::before {
    content: counter(guide-step);
    position: absolute;
    left: 12px;
    top: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-steps li strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.guide-steps li p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted, #64748b);
    line-height: 1.5;
}

.guide-cta {
    text-align: center;
    padding: 40px 20px;
    margin: 32px 0;
    background: var(--color-bg-alt, #f0f4f8);
    border-radius: var(--radius-md, 12px);
}

.guide-cta h2 {
    margin: 0 0 8px;
}

.guide-cta p {
    margin: 0 0 20px;
    color: var(--color-text-muted, #64748b);
}

/* Payment & guide mobile values now in base styles */

/* ============================================
   Ad-hoc Guide Page Redesign
   ============================================ */

.guide-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 133, 110, 0.08), transparent 34%),
        linear-gradient(180deg, #F7FBFA 0%, #fff 360px);
    padding: 34px 0 72px;
}

.guide-page .container {
    max-width: 1180px;
}

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.72fr);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 44px;
}

.guide-hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 34px 0;
}

.guide-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #102522;
    font-size: 54px;
    line-height: 1.03;
}

.guide-hero p {
    max-width: 700px;
    margin: 16px 0 0;
    color: #4d5d5a;
    font-size: 18px;
    line-height: 1.65;
}

.guide-quick-card,
.guide-step-card,
.guide-payment-card,
.guide-check-card,
.guide-power-grid article,
.guide-tip-band,
.guide-link-stack a {
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(17, 35, 31, 0.07);
}

.guide-quick-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
}

.guide-quick-card span {
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-quick-card strong {
    display: block;
    margin-top: 9px;
    color: #102522;
    font-size: 30px;
    line-height: 1.12;
}

.guide-quick-card p {
    margin: 14px 0 0;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.guide-section {
    margin-top: 46px;
}

.guide-step-grid,
.guide-payment-grid,
.guide-power-grid {
    display: grid;
    gap: 14px;
}

.guide-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-step-card {
    position: relative;
    min-width: 0;
    padding: 18px;
}

.guide-step-card img {
    display: block;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: 12px;
}

.guide-step-card > span {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.guide-step-card h3,
.guide-payment-card h3 {
    margin: 0;
    color: #102522;
    font-size: 18px;
    line-height: 1.25;
}

.guide-step-card p,
.guide-payment-card p,
.guide-power-grid p {
    margin: 9px 0 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.guide-payment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-payment-card {
    min-width: 0;
    padding: 18px;
}

.guide-payment-card > span,
.guide-power-grid span {
    display: inline-grid;
    min-width: 42px;
    height: 34px;
    place-items: center;
    padding: 0 9px;
    border-radius: 10px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 900;
}

.guide-payment-card h3 {
    margin-top: 14px;
}

.guide-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
    gap: 24px;
    align-items: start;
}

.guide-split h2 {
    margin: 0;
    color: #102522;
    font-size: 30px;
    line-height: 1.15;
}

.guide-split p {
    margin: 10px 0 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.guide-check-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 18px;
}

.guide-check-card div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.guide-check-card span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-weight: 900;
}

.guide-check-card p {
    margin: 0;
    color: #263b37;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.guide-power-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-power-grid article {
    min-width: 0;
    padding: 18px;
}

.guide-power-grid strong {
    display: block;
    margin-top: 12px;
    color: #102522;
    font-size: 18px;
}

.guide-tip-band {
    padding: 24px;
    background: linear-gradient(135deg, rgba(235, 249, 244, 0.96), rgba(255, 255, 255, 0.96));
}

.guide-link-stack {
    display: grid;
    gap: 10px;
}

.guide-link-stack a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 14px 16px;
    color: var(--color-primary-text);
    font-weight: 900;
    text-decoration: none;
}

.guide-link-stack a::after {
    content: '→';
    margin-left: 12px;
}

.guide-link-stack a:hover {
    border-color: rgba(0, 133, 110, 0.34);
    background: rgba(235, 249, 244, 0.9);
}

@media (max-width: 920px) {
    .guide-hero,
    .guide-split {
        grid-template-columns: 1fr;
    }

    .guide-step-grid,
    .guide-payment-grid,
    .guide-power-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .guide-page {
        padding: 22px 0 54px;
    }

    .guide-hero-copy {
        padding: 12px 0;
    }

    .guide-hero h1 {
        font-size: 34px;
    }

    .guide-hero p {
        font-size: 16px;
    }

    .guide-hero .btn {
        width: 100%;
    }

    .guide-step-grid,
    .guide-payment-grid,
    .guide-power-grid {
        grid-template-columns: 1fr;
    }

    .guide-step-card img {
        max-width: 120px;
    }

    .guide-tip-band {
        padding: 18px;
    }
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.filter-toggle.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.filter-toggle svg {
    width: 16px;
    height: 16px;
}

/* Data freshness notice */
.data-freshness.stale {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255, 170, 0, 0.08);
    border-radius: 6px;
}

/* ============================================
   City Ranking Cards & Table
   ============================================ */

/* Ranked city card with rank number */
.city-card-ranked {
    position: relative;
    padding-left: 32px;
}

.city-rank {
    position: absolute;
    left: 10px;
    top: 10px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* Price color utilities for inline use */
.price-color-green { color: var(--color-price-green); font-weight: 600; }
.price-color-yellow { color: var(--color-price-yellow); font-weight: 600; }
.price-color-orange { color: var(--color-price-orange); font-weight: 600; }
.price-color-red { color: var(--color-price-red); font-weight: 600; }
.price-color-gray { color: var(--color-text-secondary); }

/* Section header with "Alle ansehen" link */
.section-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-header-row .section-title {
    margin-bottom: 0;
}

.link-arrow {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.link-arrow::after {
    content: ' \2192';
}

/* Cross-links section (guenstig/teuer pages) */
.section-cta {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.section-cta a {
    font-weight: 500;
}

/* Station List Items (ranked lists) */
.station-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.station-list-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.station-rank {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.station-info {
    flex: 1;
    min-width: 0;
}

.station-name {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.station-price {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
}

.station-price.price-low {
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-price-green);
}

.station-price.price-medium {
    background: rgba(139, 105, 20, 0.1);
    color: var(--color-price-yellow);
}

.station-price.price-high {
    background: rgba(185, 28, 28, 0.1);
    color: var(--color-price-red);
}

.station-price.price-unknown {
    background: var(--color-bg);
    color: var(--color-text-secondary);
}

/* Pricing mobile values now in base styles */

/* ============================================
   City Hub Redesign
   ============================================ */

.city-hub-page {
    background:
        linear-gradient(180deg, rgba(232, 246, 241, 0.9) 0, rgba(250, 250, 250, 0) 520px),
        var(--color-bg);
}

.city-hub-page .section {
    padding: 56px 0;
}

/* ============================================
   City Ranking Subpages Redesign
   ============================================ */

.city-ranking-page {
    background:
        linear-gradient(180deg, rgba(232, 246, 241, 0.9) 0, rgba(250, 250, 250, 0) 500px),
        var(--color-bg);
}

.city-ranking-page-expensive {
    background:
        linear-gradient(180deg, rgba(255, 246, 232, 0.9) 0, rgba(250, 250, 250, 0) 500px),
        var(--color-bg);
}

.city-ranking-page .section {
    padding: 56px 0;
}

.city-ranking-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.city-ranking-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.98) 0 42%, rgba(255, 255, 255, 0.76) 68%, rgba(236, 247, 243, 0.72) 100%),
        repeating-linear-gradient(31deg, transparent 0 82px, rgba(0, 133, 110, 0.07) 83px 85px, transparent 86px 158px),
        repeating-linear-gradient(122deg, transparent 0 108px, rgba(255, 128, 32, 0.07) 109px 111px, transparent 112px 188px);
    pointer-events: none;
}

.city-ranking-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 42px;
    align-items: center;
}

.city-ranking-hero-copy {
    min-width: 0;
}

.city-ranking-eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
}

.city-ranking-page-expensive .city-ranking-eyebrow {
    background: rgba(255, 128, 32, 0.12);
    color: var(--color-price-orange);
}

.city-ranking-hero-copy h1 {
    max-width: 820px;
    margin: 0;
    color: #102522;
    font-size: clamp(38px, 5.6vw, 70px);
    line-height: 0.98;
}

.city-ranking-hero-copy p {
    max-width: 690px;
    margin: 18px 0 0;
    color: #455653;
    font-size: 18px;
}

.city-ranking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.city-ranking-decision {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(17, 35, 31, 0.12);
}

.city-ranking-decision span {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.city-ranking-decision strong,
.city-ranking-decision b {
    display: block;
}

.city-ranking-decision strong {
    margin-top: 8px;
    color: #102522;
    font-size: 30px;
    line-height: 1.08;
}

.city-ranking-decision b {
    margin-top: 7px;
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 24px;
}

.city-ranking-decision p {
    margin: 12px 0 14px;
    color: var(--color-text-secondary);
}

.city-ranking-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.city-ranking-section-head h2 {
    margin: 0 0 6px;
    color: #102522;
    font-size: clamp(24px, 3vw, 34px);
}

.city-ranking-section-head p {
    margin: 0;
    color: var(--color-text-secondary);
}

.city-ranking-list {
    display: grid;
    gap: 10px;
}

.city-ranking-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(17, 35, 31, 0.05);
}

.city-ranking-card:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 133, 110, 0.36);
    text-decoration: none;
}

.city-ranking-page-expensive .city-ranking-card:hover {
    border-color: rgba(255, 128, 32, 0.36);
}

.city-ranking-rank {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-weight: 900;
}

.city-ranking-page-expensive .city-ranking-rank {
    background: rgba(255, 128, 32, 0.12);
    color: var(--color-price-orange);
}

.city-ranking-main,
.city-ranking-price,
.city-ranking-min {
    min-width: 0;
}

.city-ranking-main strong,
.city-ranking-main small,
.city-ranking-price small,
.city-ranking-price b,
.city-ranking-min small,
.city-ranking-min b {
    display: block;
}

.city-ranking-main strong {
    overflow: hidden;
    color: #102522;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-ranking-main small,
.city-ranking-price small,
.city-ranking-min small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.city-ranking-price,
.city-ranking-min {
    text-align: right;
}

.city-ranking-price b,
.city-ranking-min b {
    font-family: var(--font-mono);
    font-size: 15px;
}

.city-ranking-explain-section {
    background: #fff;
}

.city-ranking-explain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.city-ranking-explain-grid div {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
}

.city-ranking-explain-grid span {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-weight: 900;
}

.city-ranking-page-expensive .city-ranking-explain-grid span {
    color: var(--color-price-orange);
}

.city-ranking-explain-grid h3 {
    margin: 10px 0 6px;
    color: #102522;
}

.city-ranking-explain-grid p {
    margin: 0;
    color: var(--color-text-secondary);
}

.city-ranking-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.city-ranking-trust-row a {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-text);
    font-weight: 900;
}

.city-ranking-trust-row a:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 980px) {
    .city-ranking-hero-grid {
        grid-template-columns: 1fr;
    }

    .city-ranking-decision {
        max-width: 560px;
    }

    .city-ranking-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .city-ranking-min {
        grid-column: 2 / -1;
        text-align: left;
    }

    .city-ranking-explain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .city-ranking-page .section {
        padding: 40px 0;
    }

    .city-ranking-hero {
        padding-top: 36px;
    }

    .city-ranking-hero-copy h1 {
        font-size: clamp(34px, 12vw, 48px);
    }

    .city-ranking-hero-copy p {
        font-size: 16px;
    }

    .city-ranking-actions,
    .city-ranking-actions .btn {
        width: 100%;
    }

    .city-ranking-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .city-ranking-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .city-ranking-price,
    .city-ranking-min {
        grid-column: 2;
        text-align: left;
    }

    .city-ranking-explain-grid {
        grid-template-columns: 1fr;
    }
}

.city-hub-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.city-hub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.98) 0 42%, rgba(255, 255, 255, 0.76) 68%, rgba(236, 247, 243, 0.72) 100%),
        repeating-linear-gradient(31deg, transparent 0 82px, rgba(0, 133, 110, 0.07) 83px 85px, transparent 86px 158px),
        repeating-linear-gradient(122deg, transparent 0 108px, rgba(255, 128, 32, 0.07) 109px 111px, transparent 112px 188px);
    pointer-events: none;
}

.city-hub-hero-grid,
.city-hub-stats {
    position: relative;
    z-index: 1;
}

.city-hub-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 42px;
    align-items: center;
}

.city-hub-hero-copy {
    min-width: 0;
}

.city-hub-eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
}

.city-hub-hero-copy h1 {
    max-width: 850px;
    margin: 0;
    color: #102522;
    font-size: clamp(38px, 5.6vw, 70px);
    line-height: 0.98;
}

.city-hub-hero-copy p {
    max-width: 690px;
    margin: 18px 0 0;
    color: #455653;
    font-size: 18px;
}

.city-hub-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 640px);
    margin-top: 26px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 46, 42, 0.1);
}

.city-hub-search input {
    min-width: 0;
    flex: 1;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    padding: 0 12px;
}

.city-hub-search input:focus {
    outline: none;
}

.city-hub-search .btn {
    height: 42px;
    min-width: 104px;
}

.city-hub-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.city-hub-quick-links a,
.city-hub-trust-row a {
    padding: 9px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
}

.city-hub-quick-links a:hover,
.city-hub-trust-row a:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.city-hub-decision {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(17, 35, 31, 0.12);
}

.city-hub-decision span {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.city-hub-decision strong,
.city-hub-decision b {
    display: block;
}

.city-hub-decision strong {
    margin-top: 8px;
    color: #102522;
    font-size: 30px;
    line-height: 1.08;
}

.city-hub-decision b {
    margin-top: 7px;
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 24px;
}

.city-hub-decision p {
    margin: 12px 0 14px;
    color: var(--color-text-secondary);
}

.city-hub-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 38px;
}

.city-hub-stats div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(17, 35, 31, 0.08);
}

.city-hub-stats span {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 800;
}

.city-hub-stats strong {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: clamp(22px, 3vw, 30px);
}

.city-hub-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.city-hub-section-head h2 {
    margin: 0 0 6px;
    color: #102522;
    font-size: clamp(24px, 3vw, 34px);
}

.city-hub-section-head p {
    margin: 0;
    color: var(--color-text-secondary);
}

.city-hub-rank-grid,
.city-hub-card-grid,
.city-hub-explain-grid {
    display: grid;
    gap: 16px;
}

.city-hub-rank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.city-hub-rank-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 35, 31, 0.07);
}

.city-hub-rank-cheap {
    border-color: rgba(0, 133, 110, 0.22);
    background: linear-gradient(180deg, #fff 0, rgba(231, 248, 241, 0.76) 100%);
}

.city-hub-rank-expensive {
    border-color: rgba(255, 128, 32, 0.24);
    background: linear-gradient(180deg, #fff 0, rgba(255, 246, 232, 0.76) 100%);
}

.city-hub-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.city-hub-panel-head h3 {
    margin: 0;
    color: #102522;
    font-size: 20px;
}

.city-hub-panel-head a {
    color: var(--color-primary-text);
    font-weight: 900;
}

.city-hub-rank-list {
    display: grid;
    gap: 8px;
}

.city-hub-rank-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
}

.city-hub-rank-row:hover {
    border-color: rgba(0, 133, 110, 0.28);
    background: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.city-hub-rank {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.city-hub-rank-row-expensive .city-hub-rank {
    background: rgba(255, 128, 32, 0.12);
    color: var(--color-price-orange);
}

.city-hub-rank-main,
.city-hub-rank-price {
    min-width: 0;
}

.city-hub-rank-main strong,
.city-hub-rank-main small,
.city-hub-rank-price small,
.city-hub-rank-price b {
    display: block;
}

.city-hub-rank-main strong {
    overflow: hidden;
    color: #102522;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-hub-rank-main small,
.city-hub-rank-price small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.city-hub-rank-price {
    text-align: right;
}

.city-hub-rank-price b {
    font-family: var(--font-mono);
    font-size: 14px;
}

.city-hub-top-section,
.city-hub-search-section {
    background: #fff;
}

.city-hub-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.city-hub-card {
    display: grid;
    min-width: 0;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(17, 35, 31, 0.05);
}

.city-hub-card:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 133, 110, 0.36);
    text-decoration: none;
}

.city-hub-card strong,
.city-hub-card span,
.city-hub-card b {
    display: block;
    min-width: 0;
}

.city-hub-card strong {
    overflow: hidden;
    color: #102522;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-hub-card span {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.city-hub-card b,
.city-hub-card .city-price {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 900;
}

.city-hub-search-section .city-search-controls {
    margin-bottom: 18px;
}

.city-hub-search-results {
    margin-top: 4px;
}

.city-hub-explain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.city-hub-explain-grid div {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
}

.city-hub-explain-grid span {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-weight: 900;
}

.city-hub-explain-grid h3 {
    margin: 10px 0 6px;
    color: #102522;
}

.city-hub-explain-grid p {
    margin: 0;
    color: var(--color-text-secondary);
}

.city-hub-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 980px) {
    .city-hub-hero-grid,
    .city-hub-rank-grid {
        grid-template-columns: 1fr;
    }

    .city-hub-decision {
        max-width: 560px;
    }

    .city-hub-stats,
    .city-hub-card-grid,
    .city-hub-explain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .city-hub-page .section {
        padding: 40px 0;
    }

    .city-hub-hero {
        padding-top: 36px;
    }

    .city-hub-hero-copy h1 {
        font-size: clamp(34px, 12vw, 48px);
    }

    .city-hub-hero-copy p {
        font-size: 16px;
    }

    .city-hub-search {
        align-items: stretch;
        flex-direction: column;
    }

    .city-hub-search .btn {
        width: 100%;
    }

    .city-hub-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .city-hub-stats,
    .city-hub-card-grid,
    .city-hub-explain-grid {
        grid-template-columns: 1fr;
    }

    .city-hub-rank-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .city-hub-rank-price {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 380px) {
    .city-hub-stats div {
        padding: 14px 16px;
    }
}

/* ============================================
   Category Pricing Pages Redesign
   ============================================ */

.category-price-page {
    background:
        linear-gradient(180deg, rgba(232, 246, 241, 0.9) 0, rgba(250, 250, 250, 0) 520px),
        var(--color-bg);
}

.category-price-page .section {
    padding: 56px 0;
}

.category-price-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.category-price-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.98) 0 42%, rgba(255, 255, 255, 0.76) 68%, rgba(236, 247, 243, 0.72) 100%),
        repeating-linear-gradient(31deg, transparent 0 82px, rgba(0, 133, 110, 0.07) 83px 85px, transparent 86px 158px),
        repeating-linear-gradient(122deg, transparent 0 108px, rgba(255, 128, 32, 0.07) 109px 111px, transparent 112px 188px);
    pointer-events: none;
}

.category-price-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 42px;
    align-items: center;
}

.category-price-hero-copy {
    min-width: 0;
}

.category-price-eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
}

.category-price-hero-copy h1 {
    max-width: 820px;
    margin: 0;
    color: #102522;
    font-size: clamp(38px, 5.6vw, 70px);
    line-height: 0.98;
}

.category-price-hero-copy p {
    max-width: 690px;
    margin: 18px 0 0;
    color: #455653;
    font-size: 18px;
}

.category-price-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.category-price-decision {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(17, 35, 31, 0.12);
}

.category-price-decision > span {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.category-price-decision > strong {
    display: block;
    margin-top: 8px;
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 30px;
    line-height: 1.08;
}

.category-price-decision p {
    margin: 12px 0 18px;
    color: var(--color-text-secondary);
}

.category-price-decision div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.category-price-decision b,
.category-price-decision small {
    display: block;
}

.category-price-decision b {
    color: #102522;
    font-family: var(--font-mono);
    font-size: 19px;
}

.category-price-decision small {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.category-filter-strip,
.category-price-pulse {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.88);
}

.category-filter-inner,
.category-price-pulse-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
}

.category-filter-inner a,
.category-trust-row a {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-text);
    font-weight: 900;
}

.category-filter-inner a:hover,
.category-trust-row a:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.category-price-pulse-title {
    margin-right: auto;
    color: #102522;
    font-weight: 900;
}

.category-price-pulse-card {
    min-width: 156px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fff;
}

.category-price-pulse-card small,
.category-price-pulse-card strong {
    display: block;
}

.category-price-pulse-card small {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.category-price-pulse-card strong {
    margin-top: 3px;
    color: #102522;
    font-family: var(--font-mono);
    font-size: 20px;
}

.category-price-trip {
    background: rgba(0, 133, 110, 0.08);
}

.category-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.category-section-head h2 {
    margin: 0 0 6px;
    color: #102522;
    font-size: clamp(24px, 3vw, 34px);
}

.category-section-head p {
    margin: 0;
    color: var(--color-text-secondary);
}

.category-rank-grid,
.category-operator-grid,
.category-region-grid,
.category-explain-grid {
    display: grid;
    gap: 16px;
}

.category-rank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.category-rank-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 35, 31, 0.07);
}

.category-rank-cheap {
    border-color: rgba(0, 133, 110, 0.22);
    background: linear-gradient(180deg, #fff 0, rgba(231, 248, 241, 0.76) 100%);
}

.category-rank-expensive {
    border-color: rgba(255, 128, 32, 0.24);
    background: linear-gradient(180deg, #fff 0, rgba(255, 246, 232, 0.76) 100%);
}

.category-rank-panel h3 {
    margin: 0 0 14px;
    color: #102522;
    font-size: 20px;
}

.category-price-list {
    display: grid;
    gap: 8px;
}

.category-price-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
}

.category-price-row:hover {
    border-color: rgba(0, 133, 110, 0.28);
    background: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.category-price-rank {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.category-price-row-expensive .category-price-rank {
    background: rgba(255, 128, 32, 0.12);
    color: var(--color-price-orange);
}

.category-price-main,
.category-price-value {
    min-width: 0;
}

.category-price-main strong,
.category-price-main small,
.category-price-value small,
.category-price-value b {
    display: block;
}

.category-price-main strong {
    overflow: hidden;
    color: #102522;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-price-main small,
.category-price-value small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.category-price-value {
    text-align: right;
}

.category-price-value b {
    font-family: var(--font-mono);
    font-size: 14px;
}

.category-operator-section,
.category-region-section {
    background: #fff;
}

.category-operator-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-operator-card {
    display: grid;
    min-width: 0;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(17, 35, 31, 0.05);
}

.category-operator-card:hover {
    border-color: rgba(0, 133, 110, 0.36);
    text-decoration: none;
}

.category-operator-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.category-operator-logo {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    font-weight: 900;
}

.category-operator-head strong,
.category-operator-head small {
    display: block;
    min-width: 0;
}

.category-operator-head strong {
    overflow: hidden;
    color: #102522;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-operator-head small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.category-operator-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.category-operator-metrics span {
    padding: 10px;
    border-radius: 8px;
    background: var(--color-bg);
}

.category-operator-metrics small,
.category-operator-metrics b {
    display: block;
}

.category-operator-metrics small {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.category-operator-metrics b {
    font-family: var(--font-mono);
    font-size: 15px;
}

.category-region-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-region-item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
}

.category-region-item:hover,
.category-region-item.active {
    border-color: var(--color-primary);
    text-decoration: none;
}

.category-region-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.category-region-item b {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
}

.category-explain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-explain-grid div {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
}

.category-explain-grid span {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-weight: 900;
}

.category-explain-grid h3 {
    margin: 10px 0 6px;
    color: #102522;
}

.category-explain-grid p {
    margin: 0;
    color: var(--color-text-secondary);
}

.category-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 980px) {
    .category-price-hero-grid,
    .category-rank-grid {
        grid-template-columns: 1fr;
    }

    .category-price-decision {
        max-width: 560px;
    }

    .category-operator-grid,
    .category-region-grid,
    .category-explain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .category-price-page .section {
        padding: 40px 0;
    }

    .category-price-hero {
        padding-top: 36px;
    }

    .category-price-hero-copy h1 {
        font-size: clamp(34px, 12vw, 48px);
    }

    .category-price-hero-copy p {
        font-size: 16px;
    }

    .category-price-actions,
    .category-price-actions .btn {
        width: 100%;
    }

    .category-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .category-price-pulse-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .category-price-pulse-title {
        margin-right: 0;
    }

    .category-price-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .category-price-value {
        grid-column: 2;
        text-align: left;
    }

    .category-operator-grid,
    .category-region-grid,
    .category-explain-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .category-price-decision div,
    .category-operator-metrics {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Price Hub Redesign
   ============================================ */

.price-hub-page {
    background:
        linear-gradient(180deg, rgba(232, 246, 241, 0.9) 0, rgba(250, 250, 250, 0) 520px),
        var(--color-bg);
}

.price-hub-page .section {
    padding: 58px 0;
}

.price-hub-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.price-hub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.98) 0 40%, rgba(255, 255, 255, 0.76) 64%, rgba(235, 247, 243, 0.74) 100%),
        repeating-linear-gradient(30deg, transparent 0 86px, rgba(0, 133, 110, 0.07) 87px 89px, transparent 90px 162px),
        repeating-linear-gradient(122deg, transparent 0 110px, rgba(255, 128, 32, 0.07) 111px 113px, transparent 114px 190px);
    pointer-events: none;
}

.price-hub-hero-grid,
.price-hub-stats {
    position: relative;
    z-index: 1;
}

.price-hub-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 44px;
    align-items: center;
}

.price-hub-eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
}

.price-hub-hero-copy h1 {
    max-width: 780px;
    margin: 0;
    color: #102522;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 0.96;
}

.price-hub-hero-copy p {
    max-width: 690px;
    margin: 18px 0 0;
    color: #455653;
    font-size: 18px;
}

.price-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.price-hub-decision {
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(17, 35, 31, 0.12);
}

.price-hub-decision > span {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.price-hub-decision > strong {
    display: block;
    margin-top: 8px;
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 30px;
    line-height: 1.08;
}

.price-hub-decision p {
    margin: 12px 0 18px;
    color: var(--color-text-secondary);
}

.price-hub-decision div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.price-hub-decision b,
.price-hub-decision small {
    display: block;
    min-width: 0;
}

.price-hub-decision b {
    color: #102522;
    font-family: var(--font-mono);
    font-size: 22px;
}

.price-hub-decision small {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.price-hub-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 38px;
}

.price-hub-stats div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(17, 35, 31, 0.08);
}

.price-hub-stats span {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 800;
}

.price-hub-stats strong {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: clamp(22px, 3vw, 30px);
}

.price-hub-pulse {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.86);
}

.price-hub-pulse-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.price-hub-pulse-title {
    margin-right: auto;
    color: #102522;
    font-weight: 900;
}

.price-hub-pulse-chip {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 2px 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.price-hub-pulse-chip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
}

.price-hub-pulse-chip span {
    color: #102522;
    font-family: var(--font-mono);
    font-weight: 900;
}

.price-hub-pulse-chip small {
    grid-column: 2;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.price-hub-ac b,
.price-hub-cost-card.price-hub-ac::before {
    background: #1D5FD8;
}

.price-hub-dc b,
.price-hub-cost-card.price-hub-dc::before {
    background: #B45309;
}

.price-hub-hpc b,
.price-hub-cost-card.price-hub-hpc::before {
    background: #C6283A;
}

.price-hub-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.price-hub-section-head h2 {
    margin: 0 0 6px;
    color: #102522;
    font-size: clamp(24px, 3vw, 34px);
}

.price-hub-section-head p {
    margin: 0;
    color: var(--color-text-secondary);
}

.price-hub-cost-grid,
.price-hub-category-grid,
.price-hub-ranking-grid,
.price-hub-connector-grid,
.price-hub-explain-grid {
    display: grid;
    gap: 16px;
}

.price-hub-cost-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-hub-cost-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(17, 35, 31, 0.07);
}

.price-hub-cost-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
}

.price-hub-cost-card:hover,
.price-hub-category-card:hover,
.price-hub-rank-row:hover {
    border-color: rgba(0, 133, 110, 0.36);
    text-decoration: none;
}

.price-hub-cost-card span,
.price-hub-cost-card small,
.price-hub-category-card p,
.price-hub-card-metrics small,
.price-hub-connector-card small,
.price-hub-explain-grid p {
    color: var(--color-text-secondary);
}

.price-hub-cost-card span {
    font-weight: 900;
}

.price-hub-cost-card strong {
    display: block;
    margin-top: 12px;
    color: #102522;
    font-family: var(--font-mono);
    font-size: 34px;
}

.price-hub-cost-card small {
    display: block;
    margin-top: 4px;
}

.price-hub-category-section,
.price-hub-connector-section {
    background: #fff;
}

.price-hub-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.price-hub-category-card {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(17, 35, 31, 0.05);
}

.price-hub-card-tag {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.09);
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 900;
}

.price-hub-category-card h3 {
    margin: 0;
    color: #102522;
    font-size: 19px;
}

.price-hub-category-card p {
    margin: 0;
    font-size: 14px;
}

.price-hub-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.price-hub-card-metrics span {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--color-bg);
}

.price-hub-card-metrics b,
.price-hub-card-metrics small {
    display: block;
}

.price-hub-card-metrics b {
    color: #102522;
    font-family: var(--font-mono);
    font-size: 15px;
}

.price-hub-ranking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-hub-ranking-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 35, 31, 0.07);
}

.price-hub-ranking-green {
    border-color: rgba(0, 133, 110, 0.22);
    background: linear-gradient(180deg, #fff 0, rgba(231, 248, 241, 0.76) 100%);
}

.price-hub-ranking-orange {
    border-color: rgba(255, 128, 32, 0.24);
    background: linear-gradient(180deg, #fff 0, rgba(255, 246, 232, 0.76) 100%);
}

.price-hub-ranking-panel h3 {
    margin: 0 0 14px;
    color: #102522;
    font-size: 20px;
}

.price-hub-rank-list {
    display: grid;
    gap: 8px;
}

.price-hub-rank-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
}

.price-hub-rank {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.09);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.price-hub-rank-main,
.price-hub-rank-price {
    min-width: 0;
}

.price-hub-rank-main strong,
.price-hub-rank-main small,
.price-hub-rank-price small,
.price-hub-rank-price b {
    display: block;
}

.price-hub-rank-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #102522;
    font-size: 14px;
}

.price-hub-rank-main small,
.price-hub-rank-price small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.price-hub-rank-price {
    text-align: right;
}

.price-hub-rank-price b {
    font-family: var(--font-mono);
    font-size: 14px;
}

.price-hub-connector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-hub-connector-card {
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: var(--color-bg);
}

.price-hub-connector-card span,
.price-hub-connector-card strong,
.price-hub-connector-card small {
    display: block;
}

.price-hub-connector-card span {
    color: #102522;
    font-weight: 900;
}

.price-hub-connector-card strong {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 26px;
}

.price-hub-connector-card small {
    margin-top: 4px;
}

.price-hub-explain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-hub-explain-grid div {
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
}

.price-hub-explain-grid span {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-weight: 900;
}

.price-hub-explain-grid h3 {
    margin: 10px 0 6px;
    color: #102522;
}

.price-hub-explain-grid p {
    margin: 0;
}

.price-hub-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.price-hub-trust-row a {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-text);
    font-weight: 900;
}

.price-hub-trust-row a:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 980px) {
    .price-hub-hero-grid,
    .price-hub-ranking-grid {
        grid-template-columns: 1fr;
    }

    .price-hub-decision {
        max-width: 560px;
    }

    .price-hub-stats,
    .price-hub-cost-grid,
    .price-hub-category-grid,
    .price-hub-connector-grid,
    .price-hub-explain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .price-hub-page .section {
        padding: 40px 0;
    }

    .price-hub-hero {
        padding-top: 36px;
    }

    .price-hub-hero-copy h1 {
        font-size: clamp(36px, 12vw, 48px);
    }

    .price-hub-hero-copy p {
        font-size: 16px;
    }

    .price-hub-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .price-hub-actions,
    .price-hub-actions .btn {
        width: 100%;
    }

    .price-hub-stats,
    .price-hub-cost-grid,
    .price-hub-category-grid,
    .price-hub-connector-grid,
    .price-hub-explain-grid {
        grid-template-columns: 1fr;
    }

    .price-hub-pulse-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .price-hub-pulse-title {
        margin-right: 0;
    }

    .price-hub-pulse-chip {
        width: 100%;
    }

    .price-hub-rank-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .price-hub-rank-price {
        grid-column: 2;
        text-align: left;
    }
}

/* ============================================
   Operator Directory Redesign
   ============================================ */

.operator-directory-page {
    background:
        linear-gradient(180deg, rgba(234, 246, 242, 0.9) 0, rgba(250, 250, 250, 0) 470px),
        var(--color-bg);
}

.operator-directory-page .section {
    padding: 56px 0;
}

.operator-directory-page .section-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 24px;
}

.operator-directory-page .section-head h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin: 0 0 6px;
}

.operator-directory-page .section-head p {
    color: var(--color-text-secondary);
    margin: 0;
}

.operator-directory-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 26px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.operator-directory-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.96) 0 38%, rgba(255, 255, 255, 0.72) 60%, rgba(232, 244, 240, 0.5) 100%),
        repeating-linear-gradient(31deg, transparent 0 76px, rgba(0, 133, 110, 0.08) 77px 79px, transparent 80px 150px),
        repeating-linear-gradient(122deg, transparent 0 98px, rgba(255, 128, 32, 0.08) 99px 101px, transparent 102px 174px);
    pointer-events: none;
}

.operator-directory-hero-grid,
.operator-directory-stats {
    position: relative;
    z-index: 1;
}

.operator-directory-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    align-items: center;
}

.operator-directory-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 800;
}

.operator-directory-copy h1 {
    max-width: 780px;
    margin: 0;
    color: #102522;
    font-size: clamp(36px, 6vw, 68px);
    line-height: 0.98;
}

.operator-directory-copy p {
    max-width: 670px;
    margin: 18px 0 0;
    color: #455653;
    font-size: 18px;
}

.operator-directory-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 620px);
    margin-top: 28px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(24, 46, 42, 0.1);
}

.operator-directory-search input {
    min-width: 0;
    flex: 1;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    padding: 0 12px;
}

.operator-directory-search input:focus {
    outline: none;
}

.operator-directory-search .btn {
    height: 42px;
    min-width: 104px;
}

.operator-directory-decision {
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(17, 35, 31, 0.12);
}

.operator-directory-decision span,
.operator-directory-price span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.operator-directory-decision strong {
    display: block;
    margin-top: 10px;
    color: #102522;
    font-size: 28px;
    line-height: 1.08;
}

.operator-directory-decision b {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 24px;
}

.operator-directory-decision p {
    margin: 12px 0 14px;
    color: var(--color-text-secondary);
}

.operator-directory-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 36px;
}

.operator-directory-stats div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(17, 35, 31, 0.08);
}

.operator-directory-stats span {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.operator-directory-stats strong {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: clamp(22px, 3vw, 30px);
}

.operator-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.operator-highlight-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 35, 31, 0.07);
}

.operator-highlight-panel h3 {
    margin: 0 0 14px;
    color: #102522;
    font-size: 20px;
}

.operator-highlight-cheap {
    background: linear-gradient(180deg, #fff 0, rgba(231, 248, 241, 0.75) 100%);
    border-color: rgba(0, 133, 110, 0.22);
}

.operator-highlight-fast {
    background: linear-gradient(180deg, #fff 0, rgba(255, 246, 232, 0.75) 100%);
    border-color: rgba(255, 128, 32, 0.24);
}

.operator-rank-list {
    display: grid;
    gap: 8px;
}

.operator-rank-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
}

.operator-rank-row:hover {
    background: rgba(0, 133, 110, 0.06);
    text-decoration: none;
}

.operator-rank-logo {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 800;
}

.operator-rank-main,
.operator-rank-metric {
    min-width: 0;
}

.operator-rank-main strong,
.operator-rank-main small,
.operator-rank-metric small,
.operator-rank-metric b {
    display: block;
}

.operator-rank-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.operator-rank-main small,
.operator-rank-metric small {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.operator-rank-metric {
    text-align: right;
}

.operator-rank-metric b {
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 14px;
}

.operator-directory-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.operator-directory-toolbar h2 {
    margin: 0 0 6px;
    font-size: clamp(24px, 3vw, 32px);
}

.operator-directory-toolbar p {
    margin: 0;
    color: var(--color-text-secondary);
}

.operator-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.operator-sort-tabs button {
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.operator-sort-tabs button.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.operator-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.operator-directory-card {
    display: grid;
    min-width: 0;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(17, 35, 31, 0.06);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.operator-directory-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 133, 110, 0.42);
    box-shadow: 0 16px 36px rgba(17, 35, 31, 0.1);
    text-decoration: none;
}

.operator-directory-card-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.operator-directory-logo {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
}

.operator-directory-card-top strong,
.operator-directory-card-top small {
    display: block;
    min-width: 0;
}

.operator-directory-card-top strong {
    overflow: hidden;
    color: #102522;
    font-size: 17px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operator-directory-card-top small {
    margin-top: 3px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.operator-directory-price {
    padding: 14px;
    border-radius: 10px;
    background: rgba(0, 133, 110, 0.07);
}

.operator-directory-price strong {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 21px;
    line-height: 1.1;
}

.operator-directory-price small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
}

.operator-directory-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.operator-directory-card-stats span {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--color-bg);
}

.operator-directory-card-stats b,
.operator-directory-card-stats small {
    display: block;
}

.operator-directory-card-stats b {
    color: #102522;
    font-family: var(--font-mono);
    font-size: 15px;
}

.operator-directory-card-stats small {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.operator-directory-card-link {
    color: var(--color-primary-text);
    font-weight: 800;
    font-size: 13px;
}

.operator-directory-empty {
    padding: 22px;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-secondary);
    text-align: center;
}

.operator-directory-more {
    display: block;
    margin: 24px auto 0;
}

@media (max-width: 980px) {
    .operator-directory-hero-grid,
    .operator-highlight-grid {
        grid-template-columns: 1fr;
    }

    .operator-directory-decision {
        max-width: 520px;
    }

    .operator-directory-stats,
    .operator-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .operator-directory-page .section {
        padding: 38px 0;
    }

    .operator-directory-page .section-head,
    .operator-directory-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .operator-directory-hero {
        padding-top: 34px;
    }

    .operator-directory-copy h1 {
        font-size: clamp(34px, 12vw, 46px);
    }

    .operator-directory-copy p {
        font-size: 16px;
    }

    .operator-directory-search {
        align-items: stretch;
        flex-direction: column;
    }

    .operator-directory-search .btn {
        width: 100%;
    }

    .operator-directory-stats,
    .operator-directory-grid,
    .operator-directory-card-stats {
        grid-template-columns: 1fr;
    }

    .operator-directory-stats div {
        padding: 14px 16px;
    }

    .operator-sort-tabs {
        justify-content: flex-start;
        width: 100%;
    }

    .operator-rank-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .operator-rank-metric {
        grid-column: 2;
        text-align: left;
    }
}

/* ============================================
   Map Page Redesign
   ============================================ */

.page-map .site-footer {
    display: none;
}

body.page-map {
    height: 100dvh;
    overflow: hidden;
}

.page-map .main-content.no-header {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

.page-map .karte-container {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 680px;
    overflow: hidden;
    background: #EAF2EF;
}

.page-map .karte-sidebar {
    position: relative;
    inset: auto;
    z-index: 1002;
    display: flex;
    width: auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    background: #F9FBFA;
    box-shadow: 18px 0 50px rgba(22, 42, 38, 0.12);
}

.page-map .karte-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.98) 0 52%, rgba(232, 246, 241, 0.9) 100%),
        repeating-linear-gradient(34deg, transparent 0 72px, rgba(0, 133, 110, 0.08) 73px 75px, transparent 76px 144px);
}

.page-map .karte-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.page-map .karte-sidebar .karte-logo {
    display: flex;
    margin: 0;
}

.page-map .karte-logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 16px;
}

.page-map .karte-logo-text h1,
.page-map .karte-logo-title {
    font-size: 21px;
}

.page-map .karte-logo-text p {
    font-size: 12px;
}

.page-map .karte-back-link {
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 800;
}

.page-map .karte-intro {
    margin-bottom: 18px;
}

.page-map .karte-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 800;
}

.page-map .karte-intro h1 {
    margin: 0;
    color: #102522;
    font-size: 34px;
    line-height: 1;
}

.page-map .karte-intro p {
    margin: 10px 0 0;
    color: #4d5d5a;
    font-size: 14px;
}

.page-map .karte-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.page-map .karte-sidebar-header .search-box {
    position: relative;
}

.page-map .karte-sidebar-header .search-input {
    height: 48px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 35, 31, 0.07);
    font-size: 14px;
}

.page-map .karte-locate-btn {
    display: inline-flex;
    width: 100%;
    height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.page-map .karte-locate-btn:hover {
    background: var(--color-primary-dark);
}

.page-map .karte-locate-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.page-map .karte-locate-btn svg {
    width: 18px;
    height: 18px;
}

.page-map .karte-search-context {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 133, 110, 0.16);
    border-radius: 12px;
    background: rgba(246, 250, 248, 0.96);
    box-shadow: 0 12px 28px rgba(17, 35, 31, 0.06);
}

.page-map .karte-search-context[hidden] {
    display: none !important;
}

.page-map .karte-search-context-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.page-map .karte-context-kicker {
    color: var(--color-primary-text);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.page-map .karte-search-context strong {
    min-width: 0;
    color: #102522;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.page-map .karte-search-context p,
.page-map .karte-search-context-loading {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.page-map .karte-context-results {
    display: grid;
    gap: 8px;
}

.page-map .karte-context-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font: inherit;
}

.page-map .karte-context-result:hover {
    border-color: rgba(0, 133, 110, 0.34);
    background: rgba(235, 249, 244, 0.72);
}

.page-map .karte-context-result span,
.page-map .karte-context-result small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-map .karte-context-result span {
    color: #102522;
    font-size: 13px;
    font-weight: 850;
}

.page-map .karte-context-result small {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.page-map .karte-control-panel {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
}

.page-map .karte-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.page-map .karte-control-head span {
    color: #102522;
    font-size: 13px;
    font-weight: 900;
}

.page-map .filter-toggle {
    display: inline-flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-text);
    cursor: pointer;
    font-weight: 800;
}

.page-map .filter-toggle.active {
    border-color: var(--color-primary);
    background: rgba(0, 133, 110, 0.09);
}

.page-map .karte-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
    overflow: visible;
}

.page-map .filter-chip {
    height: 34px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.page-map .filter-chip-ac.active {
    background: #4F8CFF;
    border-color: #4F8CFF;
}

.page-map .filter-chip-dc.active {
    background: #FF8A1D;
    border-color: #FF8A1D;
}

.page-map .filter-chip-hpc.active {
    background: #EA4D5A;
    border-color: #EA4D5A;
}

.page-map .karte-advanced-filters {
    display: grid;
    gap: 14px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 12px;
    background: #F6FAF8;
}

.page-map .karte-advanced-filters[hidden] {
    display: none !important;
}

.page-map .karte-advanced-filters .filter-slider {
    min-width: 0;
}

.page-map .filter-slider > span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.page-map .karte-map-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 133, 110, 0.07);
    color: #28413d;
    font-size: 13px;
    font-weight: 700;
}

.page-map .karte-selected-preview {
    margin: 14px 20px 0;
    padding: 14px;
    border: 1px solid rgba(0, 133, 110, 0.2);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(17, 35, 31, 0.08);
}

.page-map .karte-preview-label,
.page-map .karte-preview-bottom,
.page-map .karte-preview-bottom a,
.page-map .karte-preview-power,
.page-map .karte-preview-price {
    display: block;
}

.page-map .karte-preview-label {
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 900;
}

.page-map .karte-selected-preview strong {
    display: block;
    margin-top: 4px;
    color: #102522;
    font-size: 15px;
}

.page-map .karte-selected-preview small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-secondary);
}

.page-map .karte-preview-bottom {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.page-map .karte-preview-power,
.page-map .karte-preview-price {
    width: fit-content;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
}

.page-map .karte-preview-bottom a {
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
    text-align: right;
}

.page-map .karte-station-list {
    display: block;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 14px 20px 20px;
}

.page-map .karte-station-card {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(17, 35, 31, 0.06);
}

.page-map .karte-station-card:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 133, 110, 0.36);
}

.page-map .karte-station-card.selected {
    border-color: var(--color-primary);
    background: rgba(235, 249, 244, 0.9);
}

.page-map .karte-station-header {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    margin: 0;
}

.page-map .karte-station-rank {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 133, 110, 0.1);
    color: var(--color-primary-text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 900;
}

.page-map .karte-station-info {
    min-width: 0;
}

.page-map .karte-station-name {
    display: block;
    margin: 0;
    color: #102522;
    font-size: 15px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.page-map .karte-station-operator {
    display: block;
    margin-top: 4px;
    color: var(--color-primary-text);
    font-size: 12px;
    font-weight: 800;
}

.page-map .karte-station-address {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.page-map .karte-station-connectors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-map .karte-station-connectors span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 133, 110, 0.08);
    color: var(--color-primary-text);
    font-size: 11px;
    font-weight: 800;
}

.page-map .karte-station-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
}

.page-map .karte-station-power,
.page-map .karte-station-meta,
.page-map .karte-station-price,
.page-map .karte-station-score {
    margin: 0;
    border-radius: 8px;
}

.page-map .karte-station-price {
    justify-self: end;
    padding: 8px 10px;
    font-size: 14px;
    white-space: nowrap;
}

.page-map .karte-station-power,
.page-map .karte-station-meta {
    padding: 7px 9px;
    background: var(--color-bg);
    color: #41534f;
    font-size: 12px;
    font-weight: 800;
}

.page-map .karte-station-power {
    color: #102522;
}

.page-map .karte-station-link {
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 900;
}

.page-map .karte-map-wrapper {
    position: relative;
    min-width: 0;
    height: 100%;
    background: #DCE8E4;
}

.page-map .karte-map {
    width: 100%;
    height: 100%;
}

.page-map .karte-map-topbar {
    position: absolute;
    top: 18px;
    left: 76px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(620px, calc(100% - 36px));
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 32px rgba(17, 35, 31, 0.13);
    backdrop-filter: blur(10px);
}

.page-map .karte-map-topbar strong {
    color: #102522;
    font-size: 14px;
}

.page-map .karte-map-topbar span {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.page-map .karte-mobile-toggle {
    display: none;
}

@media (max-width: 920px) {
    .page-map .karte-container {
        display: block;
        min-height: 100dvh;
    }

    .page-map .karte-map-wrapper {
        height: 100dvh;
    }

    .page-map .karte-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: auto;
        max-height: 74dvh;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0 0 18px 18px;
    }

    .page-map .karte-sidebar.open {
        max-height: 86dvh;
    }

    .page-map .karte-sidebar-header {
        padding: 12px;
    }

    .page-map .karte-brand-row,
    .page-map .karte-intro,
    .page-map .karte-back-link {
        display: none;
    }

    .page-map .karte-search-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .page-map .karte-sidebar-header .search-input {
        height: 42px;
        font-size: 13px;
    }

    .page-map .karte-locate-btn {
        width: 44px;
        height: 42px;
        padding: 0;
        font-size: 0;
    }

    .page-map .karte-locate-btn span {
        font-size: 0;
    }

    .page-map .karte-control-panel {
        padding: 10px 12px;
    }

    .page-map .karte-control-head,
    .page-map .karte-map-status,
    .page-map .karte-map-topbar {
        display: none;
    }

    .page-map .karte-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .page-map .filter-chip {
        flex: 0 0 auto;
    }

    .page-map .karte-advanced-filters {
        display: none !important;
    }

    .page-map .karte-selected-preview {
        margin: 10px 12px 0;
    }

    .page-map .karte-sidebar.open .karte-search-context {
        display: none !important;
    }

    .page-map .karte-station-list {
        display: none;
        max-height: 38dvh;
        padding: 10px 12px 14px;
    }

    .page-map .karte-sidebar.open .karte-station-list {
        display: block;
    }

    .page-map .karte-map {
        height: 100%;
    }

    .page-map .karte-mobile-toggle {
        position: absolute;
        bottom: 18px;
        left: 50%;
        z-index: 1003;
        display: inline-flex;
        width: auto;
        height: 46px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: var(--color-primary);
        color: #fff;
        box-shadow: 0 16px 36px rgba(17, 35, 31, 0.24);
        transform: translateX(-50%);
        font: inherit;
        font-size: 14px;
        font-weight: 900;
    }
}

@media (max-width: 420px) {
    .page-map .karte-search-form {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .page-map .karte-sidebar-header,
    .page-map .karte-control-panel {
        padding-right: 10px;
        padding-left: 10px;
    }

    .page-map .karte-filter-chip,
    .page-map .filter-chip {
        height: 32px;
        padding: 0 11px;
        font-size: 12px;
    }

    .page-map .karte-preview-bottom,
    .page-map .karte-station-footer {
        grid-template-columns: 1fr;
    }

    .page-map .karte-search-context {
        margin-top: 10px;
        padding: 10px;
    }

    .page-map .karte-search-context-head,
    .page-map .karte-context-result {
        grid-template-columns: 1fr;
    }

    .page-map .karte-search-context-head {
        display: grid;
        gap: 3px;
    }

    .page-map .karte-station-header {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .page-map .karte-station-header .karte-station-price {
        grid-column: 2;
        justify-self: start;
        white-space: normal;
    }

    .page-map .karte-preview-bottom a {
        text-align: left;
    }
}

/* Ranking table */
.ranking-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.ranking-table th,
.ranking-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.ranking-table thead th {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-bg);
}

.ranking-table tbody tr:hover {
    background: rgba(0, 133, 110, 0.04);
}

.ranking-table .col-rank {
    width: 48px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ranking-table .col-city a {
    font-weight: 500;
}

.ranking-table .col-avg-price,
.ranking-table .col-min-price {
    font-family: var(--font-mono);
    font-size: 14px;
}

/* Hidden on mobile, shown via min-width:769px query */
.ranking-table .col-min-price,
.ranking-table .col-chargepoints {
    display: none;
}

.ranking-table .col-stations,
.ranking-table .col-chargepoints {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 14px;
}

/* City search controls */
.city-search-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 24px;
}

.city-search-controls .search-form {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.city-search-controls .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.city-search-controls .search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    background: var(--color-surface);
}

.city-search-controls .search-input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 133, 110, 0.15);
}

/* Sort chips */
.sort-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sort-chip {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sort-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.sort-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Load more button */
.btn-load-more {
    display: block;
    margin: 24px auto 0;
    padding: 12px 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-load-more:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.list-expand-btn {
    margin-top: 16px;
}

/* Search status text */
.search-status {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 16px;
}

/* Filter Back Links */
.filter-back-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-back-links a {
    font-size: 14px;
    color: var(--color-primary);
    text-decoration: none;
}

.filter-back-links a::before {
    content: '\2190 ';
}

.filter-back-links a:hover {
    text-decoration: underline;
}

/* Städte mobile values now in base styles */

/* ============================================
   Price Ticker
   ============================================ */

.price-ticker {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
}

.ticker-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ticker-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.ticker-values {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticker-class {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: white;
}

.ticker-ac { background: #1D5FD8; }
.ticker-dc { background: #B45309; }
.ticker-hpc { background: #C6283A; }

.ticker-price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
   Section Subtitle
   ============================================ */

.section-subtitle {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: -12px 0 24px;
}

/* ============================================
   Operator Cards (Homepage)
   ============================================ */

.operator-grid-home {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.operator-card-ranked {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.operator-card-ranked:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.operator-card-info {
    text-align: left;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.operator-card-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}

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

.operator-card-price {
    width: auto;
    padding: 0 0 0 16px;
    border-top: none;
    border-left: 1px solid var(--color-border);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 14px;
}

/* ============================================
   Station Rows (Homepage lists)
   ============================================ */

.station-list-home {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.station-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s;
}

.station-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.station-row:hover {
    background: rgba(0, 133, 110, 0.04);
}

.station-row-rank {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.station-row-new {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    font-size: 11px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.station-row-info {
    flex: 1;
    min-width: 0;
}

.station-row-name {
    display: block;
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-row-meta {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.station-row-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.station-row-power {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.station-row-price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================
   FAQ
   ============================================ */

.section-faq .faq-list {
    /*
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;*/
}

.section-faq .faq-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.section-faq .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    gap: 12px;
}

.section-faq .faq-question:hover {
    background: rgba(0, 133, 110, 0.04);
}

.section-faq .faq-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--color-text-secondary);
}

.section-faq .faq-item.open .faq-chevron {
    transform: rotate(180deg);
}

.section-faq .faq-answer {
    padding: 0 20px 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.section-faq .faq-answer p {
    margin: 0;
}

/* ============================================
   Desktop Enhancements (mobile-first breakpoints)
   ============================================ */

/* Tablet and up (641px+) */
@media (min-width: 641px) {
    .station-list-item {
        padding: 16px;
        gap: 16px;
    }

    .station-price {
        font-size: 16px;
        padding: 8px 14px;
    }
}

/* Medium screens and up (769px+) */
@media (min-width: 769px) {
    /* Header */
    .header-search {
        order: 0;
        width: auto;
        flex: 1;
        max-width: 400px;
        margin-top: 0;
    }

    .header-nav {
        display: flex;
        flex-direction: row;
        width: auto;
        order: 0;
        padding-top: 0;
        border-top: none;
        margin-top: 0;
    }

    .mobile-menu-toggle {
        display: none;
    }

    /* Hero */
    .hero {
        padding: 60px 0 80px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-stats {
        gap: 60px;
    }

    .stat-value {
        font-size: 32px;
    }

    /* Sections */
    .section {
        margin: 60px 0 0;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .section-subtitle {
        font-size: 15px;
    }

    .section-header-row {
        flex-direction: row;
    }

    .section-cta {
        flex-direction: row;
    }

    /* Page header */
    .page-header {
        padding: 40px 0;
    }

    .page-header h1 {
        font-size: 32px;
    }

    /* Steps */
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    /* Station detail */
    .station-info-panel {
        padding: 32px;
    }

    .station-meta {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .station-map-container {
        position: sticky;
        top: 100px;
    }

    /* Error page */
    .error-code {
        font-size: 120px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        text-align: left;
    }

    /* Payment & guide */
    .payment-method-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .payment-method-card {
        padding: 24px;
    }

    .guide-steps li {
        padding: 20px 20px 20px 64px;
    }

    .guide-steps li::before {
        left: 16px;
        top: 20px;
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    /* Karte sidebar (full sidebar on desktop) */
    .karte-sidebar {
        position: static;
        width: 420px;
        right: auto;
        box-shadow: var(--shadow-md);
        z-index: 100;
    }

    .karte-sidebar .karte-logo {
        display: flex;
    }

    .karte-sidebar-header {
        padding: 24px;
        border-bottom: 1px solid var(--color-border);
    }

    .karte-filters {
        padding: 16px 24px;
    }

    .karte-advanced-filters {
        padding: 12px 24px 16px;
    }

    .karte-station-list {
        display: block;
        flex: 1;
        padding: 16px;
        max-height: none;
    }

    .karte-mobile-toggle {
        display: none;
    }

    /* City search controls */
    .city-search-controls {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .city-card-ranked {
        padding-left: 36px;
    }

    .city-rank {
        left: 12px;
        top: 12px;
    }

    /* Station rows */
    .station-row {
        padding: 14px 20px;
        gap: 16px;
    }

    .station-row-stats {
        flex-direction: row;
        gap: 16px;
    }

    /* FAQ */
    .section-faq .faq-question {
        padding: 16px 20px;
        font-size: 15px;
    }

    .section-faq .faq-answer {
        padding: 0 20px 16px;
        font-size: 15px;
    }

    /* Ticker */
    .ticker-row {
        flex-direction: row;
        gap: 24px;
        flex-wrap: wrap;
    }

    .ticker-values {
        gap: 20px;
    }

    /* Operator cards */
    .operator-grid-home {
        grid-template-columns: repeat(3, 1fr);
    }

    .operator-card-ranked {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 16px 0;
    }

    .operator-card-info {
        text-align: center;
        margin-bottom: 16px;
        flex: auto;
        min-width: auto;
    }

    .operator-card-price {
        width: 100%;
        padding: 12px 0;
        border-top: 1px solid var(--color-border);
        border-left: none;
    }

    /* Ranking table */
    .ranking-table .col-min-price,
    .ranking-table .col-chargepoints {
        display: table-cell;
    }
}

/* Large screens and up (1025px+) */
@media (min-width: 1025px) {
    .city-layout {
        flex-direction: row;
    }

    .city-sidebar {
        width: 380px;
    }

    .station-layout {
        grid-template-columns: 1fr 400px;
        gap: 32px;
        padding: 32px 0;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ============================================
   Homepage visual refresh
   ============================================ */

:root {
    --color-border: #D9E2E0;
    --color-muted-surface: #F3F8F7;
    --shadow-soft: 0 14px 36px rgba(15, 23, 42, 0.09);
}

.site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: #E3EAE8;
}

.header-inner {
    gap: 20px;
}

.nav-link {
    font-size: 14px;
}

.hero-home {
    position: relative;
    overflow: hidden;
    padding: 36px 0 30px;
    text-align: left;
    background:
        radial-gradient(circle at 16% 22%, rgba(0, 133, 110, 0.13), transparent 28%),
        linear-gradient(135deg, #F7FCFB 0%, #EEF7F5 54%, #FFFFFF 100%);
    border-bottom: 1px solid #DDE8E5;
}

.hero-inner {
    display: grid;
    gap: 28px;
    align-items: center;
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.hero-home h1 {
    margin-bottom: 16px;
    color: #17211f;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.08;
}

.hero-home h1 span {
    display: block;
}

.hero-home h1 span + span {
    color: var(--color-primary);
}

.hero-home .hero-subtitle {
    max-width: 560px;
    margin: 0 0 26px;
    color: #52615e;
    font-size: 16px;
    line-height: 1.65;
}

.hero-home .hero-search {
    max-width: 620px;
    margin: 0;
}

.hero-home .search-form-large {
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.hero-home .search-form-large .search-input {
    min-height: 64px;
    padding-right: 118px;
    border: 1px solid #CEDBD8;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    font-size: 16px;
}

.hero-home .search-form-large .search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 133, 110, 0.12);
}

.hero-home .search-button {
    right: 8px;
    padding: 13px 22px;
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(0, 133, 110, 0.22);
}

.hero-search-examples {
    margin-top: 12px;
    color: #70807c;
    font-size: 13px;
}

.hero-visual {
    min-height: 240px;
    border-radius: 28px;
    opacity: 0.98;
}

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 32px rgba(15, 23, 42, 0.05));
    mix-blend-mode: multiply;
    opacity: 0.96;
    -webkit-mask-image: radial-gradient(ellipse at 62% 46%, #000 0%, #000 50%, rgba(0, 0, 0, 0.72) 66%, transparent 88%);
    mask-image: radial-gradient(ellipse at 62% 46%, #000 0%, #000 50%, rgba(0, 0, 0, 0.72) 66%, transparent 88%);
}

.hero-home .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.hero-home .stat {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
        "icon value"
        "icon label";
    align-items: center;
    min-height: 78px;
    padding: 16px;
    text-align: left;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #DDE8E5;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.hero-home .stat-icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #005A4B;
    background: #E5F5F1;
    border-radius: 10px;
}

.hero-home .stat-value {
    grid-area: value;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
}

.hero-home .stat-label {
    grid-area: label;
    color: #53615f;
    font-size: 13px;
}

.price-ticker {
    padding: 12px 0;
    background: #FFFFFF;
    border-bottom-color: #E5ECEA;
}

.price-ticker .ticker-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #FBFDFC;
    border: 1px solid #E3EAE8;
    border-radius: 12px;
}

.ticker-label {
    color: #36433f;
    font-weight: 700;
}

.ticker-values {
    flex-wrap: wrap;
}

.ticker-item {
    padding: 4px 10px;
    background: #FFFFFF;
    border: 1px solid #E3EAE8;
    border-radius: 999px;
}

.ticker-class {
    border-radius: 7px;
}

.section {
    margin-top: 44px;
}

.section-alt {
    padding: 34px 0;
    background: #FBFDFC;
}

.section-title {
    color: #17211f;
    letter-spacing: 0;
}

.section-header-row {
    gap: 16px;
}

.link-arrow {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.ranking-section .city-grid {
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}

.ranking-section .city-card {
    min-height: 120px;
    padding: 17px 16px 16px;
    border-color: #DDE8E5;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.ranking-section .city-card-ranked {
    padding-left: 48px;
}

.ranking-section .city-rank {
    left: 14px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    background: #EDF7F5;
    border-radius: 50%;
}

.ranking-section .city-name {
    margin-bottom: 14px;
    font-size: 16px;
}

.ranking-section .city-stats {
    flex-direction: column;
    gap: 8px;
}

.ranking-section .city-price {
    font-size: 14px;
}

.ranking-section-expensive .city-rank {
    color: var(--color-price-orange);
    background: #FFF3E8;
}

.ranking-section-expensive .city-card:hover {
    border-color: #F3A76D;
}

.operator-grid-home {
    gap: 18px;
}

.operator-card-ranked {
    min-height: 118px;
    border-color: #DDE8E5;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.operator-card-ranked .city-rank {
    left: 15px;
    top: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    background: #EDF7F5;
    border-radius: 50%;
}

.operator-card-name {
    color: #17211f;
    font-size: 16px;
}

.operator-card-price {
    color: var(--color-primary);
}

.cheapest-grid {
    gap: 20px;
}

.cheapest-card {
    border-color: #DDE8E5;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.cheapest-price.price-green,
.cheapest-price.price-yellow,
.cheapest-price.price-orange,
.cheapest-price.price-red {
    background: transparent;
}

.cheapest-price.price-green { color: var(--color-price-green); }
.cheapest-price.price-yellow { color: var(--color-price-yellow); }
.cheapest-price.price-orange { color: var(--color-price-orange); }
.cheapest-price.price-red { color: var(--color-price-red); }

.home-lists-section {
    margin-top: 44px;
}

.home-lists-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    min-width: 0;
}

.home-list-panel,
.home-list-panel .station-list-home {
    min-width: 0;
    max-width: 100%;
}

.home-list-panel .section-title {
    margin-bottom: 8px;
    font-size: 22px;
}

.home-list-panel .section-subtitle {
    margin: 0 0 16px;
}

.station-list-home {
    background: #FFFFFF;
    border-color: #DDE8E5;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    width: 100%;
}

.station-row {
    width: 100%;
    min-width: 0;
    min-height: 66px;
}

.station-row:hover {
    background: #F2FAF8;
    text-decoration: none;
}

.station-row-price {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .station-row {
        gap: 10px;
        padding: 12px;
    }

    .station-row-info {
        min-width: 0;
    }

    .station-row-stats {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex: 0 0 104px;
        max-width: 104px;
        min-width: 0;
    }

    .station-row-power,
    .station-row-price {
        max-width: 100%;
        white-space: nowrap;
        overflow-wrap: anywhere;
        text-align: right;
        line-height: 1.25;
    }

    .station-row-power {
        font-size: 12px;
    }

    .station-row-price {
        font-size: 12px;
    }
}

.list-panel-link {
    display: inline-flex;
    margin-top: 14px;
    color: var(--color-primary-dark);
    font-size: 14px;
    font-weight: 700;
}

.list-panel-link::after {
    content: ' \2192';
}

.steps-grid {
    gap: 22px;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    text-align: left;
}

.step-illustration {
    grid-row: 1 / span 2;
    width: 112px;
    max-width: 100%;
}

.step-number {
    position: absolute;
    left: 82px;
    top: 16px;
    width: 26px;
    height: 26px;
    margin: 0;
    font-size: 13px;
}

.step h3 {
    grid-column: 2;
    margin-bottom: 6px;
    color: #17211f;
}

.step p {
    grid-column: 2;
}

.home-guide-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.home-guide-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(0, 133, 110, 0.18);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary-text);
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.home-guide-links a::after {
    content: '→';
    margin-left: 8px;
}

.home-guide-links a:hover {
    border-color: rgba(0, 133, 110, 0.34);
    background: rgba(235, 249, 244, 0.72);
}

.section-faq .faq-list {
    max-width: 860px;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
    overflow: hidden;
}

.site-footer {
    border-top-color: #DDE8E5;
}

@media (max-width: 520px) {
    .hero-home h1 {
        font-size: 32px;
    }

    .hero-home .search-form-large .search-input {
        min-height: 58px;
        padding-right: 92px;
        font-size: 14px;
    }

    .hero-home .search-button {
        padding: 11px 15px;
    }

    .hero-home .stat {
        grid-template-columns: 1fr;
        grid-template-areas:
            "icon"
            "value"
            "label";
        justify-items: start;
    }

    .step {
        grid-template-columns: 92px 1fr;
    }

    .step-illustration {
        width: 92px;
    }

    .step-number {
        left: 66px;
    }
}

@media (max-width: 768px) {
    .hero-visual {
        display: none;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (min-width: 769px) {
    .site-header {
        padding: 12px 0;
    }

    .header-search {
        max-width: 430px;
    }

    .hero-home {
        padding: 62px 0 32px;
    }

    .hero-inner {
        grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
        gap: 32px;
    }

    .hero-home h1 {
        font-size: 52px;
    }

    .hero-home .hero-subtitle {
        font-size: 17px;
    }

    .hero-home .hero-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        margin-top: 36px;
    }

    .hero-home .stat-value {
        font-size: 27px;
    }

    .price-ticker .ticker-row {
        grid-template-columns: max-content 1fr;
        justify-content: start;
        gap: 24px;
    }

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

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

    .operator-card-ranked {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 26px 18px 0;
    }

    .operator-card-info {
        text-align: center;
        margin-bottom: 18px;
    }

    .operator-card-price {
        width: 100%;
        padding: 13px 0;
        border-top: 1px solid #DDE8E5;
        border-left: none;
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .step {
        grid-template-columns: 128px 1fr;
        gap: 20px;
    }

    .step-illustration {
        width: 128px;
    }

    .step-number {
        left: 94px;
    }
}

@media (min-width: 1025px) {
    .home-lists-grid {
        grid-template-columns: repeat(2, minmax(0, 520px));
        justify-content: space-between;
        gap: 32px;
    }
}

/* ============================================
   Station Detail Redesign
   ============================================ */

.station-detail-redesign {
    background: #fafafa;
}

.station-detail-redesign .station-hero {
    padding: 30px 0 28px;
    background:
        radial-gradient(circle at 16% 16%, rgba(0, 133, 110, 0.14), transparent 32%),
        linear-gradient(135deg, #F7FCFB 0%, #EEF7F5 62%, #FFFFFF 100%);
    border-bottom: 1px solid #DDE8E5;
}

.station-hero-grid,
.station-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.station-operator-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    color: var(--color-primary-dark);
    background: #E5F5F1;
    border: 1px solid #CBE8E0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.station-operator-pill:hover {
    text-decoration: none;
}

.station-operator-pill span {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.station-detail-redesign .station-name {
    max-width: 820px;
    margin: 16px 0 8px;
    color: #17211f;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.08;
}

.station-detail-redesign .station-address {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    color: #52615e;
    font-size: 16px;
    font-style: normal;
}

.station-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.station-trust-row span,
.station-trust-row a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: #34413e;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #DDE8E5;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.station-trust-row span::before,
.station-trust-row a::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: 900;
}

.station-amenity-badges-redesign {
    margin: 14px 0 0;
}

.station-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.station-detail-redesign .btn {
    min-height: 46px;
    border-radius: 12px;
    font-weight: 800;
}

.station-detail-redesign .btn-primary {
    box-shadow: 0 12px 22px rgba(0, 133, 110, 0.2);
}

.station-decision-card {
    padding: 18px;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid #DDE8E5;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.station-decision-label {
    display: block;
    color: #52615e;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.station-decision-price {
    display: block;
    margin-top: 5px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 31px;
    font-weight: 900;
    line-height: 1.08;
}

.station-decision-card.price-yellow .station-decision-price { color: var(--color-price-yellow); }
.station-decision-card.price-orange .station-decision-price { color: var(--color-price-orange); }
.station-decision-card.price-red .station-decision-price { color: var(--color-price-red); }
.station-decision-card.price-gray .station-decision-price { color: var(--color-text-secondary); }

.station-decision-subline,
.station-decision-note {
    display: block;
    margin-top: 7px;
    color: #52615e;
    font-size: 13px;
}

.station-power-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.station-power-price {
    min-width: 0;
    padding: 10px 8px;
    background: #FBFDFC;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
}

.station-power-price span,
.station-power-price strong,
.station-power-price small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-power-price span {
    color: var(--color-primary-dark);
    font-size: 12px;
    font-weight: 900;
}

.station-power-price strong {
    margin-top: 4px;
    color: #17211f;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.station-power-price small {
    margin-top: 3px;
    color: #52615e;
    font-size: 11px;
}

.station-power-price-ac span { color: #2563EB; }
.station-power-price-dc span { color: var(--color-price-orange); }
.station-power-price-hpc span { color: var(--color-price-red); }

.station-power-price.is-empty {
    opacity: 0.58;
}

.station-decision-advice {
    margin: 12px 0 0;
    padding: 10px 12px;
    color: #243532;
    background: #EAF7F3;
    border: 1px solid #CFE8E2;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.station-decision-advice strong {
    color: var(--color-primary-dark);
    font-weight: 900;
}

.station-availability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.station-availability-grid div {
    padding: 10px 8px;
    text-align: center;
    background: #F3F8F7;
    border-radius: 10px;
}

.station-availability-grid strong {
    display: block;
    color: var(--color-primary-dark);
    font-size: 22px;
    line-height: 1;
}

.station-availability-grid span {
    color: #52615e;
    font-size: 12px;
}

.station-decision-links {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #DDE8E5;
}

.station-decision-links a {
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 800;
}

.station-content {
    padding: 28px 0 56px;
}

.station-main-column,
.station-side-column {
    min-width: 0;
    order: -1;
}

.station-panel {
    margin-bottom: 22px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.station-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.station-panel-header h2 {
    margin: 0;
    color: #17211f;
    font-size: 22px;
    line-height: 1.15;
}

.station-panel-header > span {
    color: #52615e;
    font-size: 13px;
}

.station-insight-strip {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.station-insight-strip a {
    display: block;
    padding: 14px 16px;
    color: #17211f;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.station-insight-strip a:hover {
    text-decoration: none;
    border-color: var(--color-primary);
}

.station-insight-strip strong {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
}

.station-insight-strip span {
    display: block;
    margin-top: 4px;
    color: #52615e;
    font-size: 13px;
}

.station-cost-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.station-cost-grid div {
    padding: 14px;
    background: #FBFDFC;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
}

.station-cost-grid span {
    display: block;
    color: #52615e;
    font-size: 12px;
}

.station-cost-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 900;
}

.station-cheaper-panel {
    border-color: #CCE5DF;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFB 100%);
}

.station-nearby-verdict-panel {
    border-color: #CFE5DF;
    background: linear-gradient(135deg, #FFFFFF 0%, #F2FAF7 100%);
}

.station-nearby-verdict-panel.has-cheaper {
    border-color: #F2C8A4;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF7EE 100%);
}

.station-nearby-verdict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 10px;
}

.station-nearby-verdict-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    color: #17211f;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #DDE8E5;
    border-radius: 12px;
    text-decoration: none;
}

.station-nearby-verdict-card:hover,
.station-nearby-verdict-card:focus-visible {
    border-color: rgba(0, 133, 110, 0.45);
    text-decoration: none;
}

.station-nearby-verdict-card.is-significant {
    border-color: #F0B377;
}

.station-nearby-verdict-card strong,
.station-nearby-verdict-card p,
.station-nearby-verdict-card small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.station-nearby-verdict-card strong {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.station-nearby-verdict-card p {
    margin: 0;
    color: #41504C;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.station-nearby-verdict-card small {
    color: #52615e;
    font-size: 12px;
    line-height: 1.35;
}

.station-cheaper-summary {
    margin: 0 0 14px;
    color: #41504C;
    font-size: 14px;
    line-height: 1.45;
}

.station-cheaper-groups {
    display: grid;
    gap: 14px;
}

.station-cheaper-group {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.station-cheaper-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    color: #41504C;
    font-size: 13px;
}

.station-cheaper-class {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 10px;
    color: #FFFFFF;
    background: var(--color-primary-dark);
    border-radius: 999px;
    font-weight: 900;
}

.station-cheaper-ac .station-cheaper-class { background: #1D5FD8; }
.station-cheaper-dc .station-cheaper-class { background: #8A3800; }
.station-cheaper-hpc .station-cheaper-class { background: #9F1717; }

.station-cheaper-list {
    display: grid;
    gap: 9px;
}

.station-cheaper-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    color: #17211f;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
    text-decoration: none;
}

.station-cheaper-card:hover,
.station-cheaper-card:focus-visible {
    border-color: rgba(0, 133, 110, 0.45);
    text-decoration: none;
}

.station-cheaper-card-main,
.station-cheaper-price {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.station-cheaper-card-main strong,
.station-cheaper-card-main small,
.station-cheaper-price b,
.station-cheaper-price small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-cheaper-card-main strong {
    color: #17211f;
    font-size: 14px;
    line-height: 1.25;
}

.station-cheaper-card-main small,
.station-cheaper-price small {
    color: #52615e;
    font-size: 12px;
    line-height: 1.35;
}

.station-cheaper-price b {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 900;
}

.station-cheaper-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 10px;
    margin-top: 14px;
}

.station-cheaper-status {
    min-width: 0;
    padding: 13px;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
}

.station-cheaper-status strong {
    display: block;
    margin-top: 10px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 900;
}

.station-cheaper-status p {
    margin: 8px 0 0;
    color: #52615e;
    font-size: 12px;
    line-height: 1.35;
}

.station-connector-list {
    display: grid;
    gap: 10px;
}

.station-connector-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
}

.station-connector-plug {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.station-connector-plug > div {
    min-width: 0;
}

.station-connector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: var(--color-primary);
    background: #E5F5F1;
    border-radius: 10px;
}

.station-connector-icon svg {
    width: 22px;
    height: 22px;
}

.station-connector-plug > div strong,
.station-connector-plug > div span {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-connector-plug > div strong {
    color: #17211f;
}

.station-connector-plug > div span {
    color: #52615e;
    font-family: var(--font-mono);
    font-size: 12px;
}

.station-cell-label {
    display: block;
    color: #52615e;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.station-connector-power,
.station-connector-price {
    font-family: var(--font-mono);
    font-weight: 900;
}

.station-connector-status-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.station-detail-redesign .status {
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
}

.station-detail-redesign .status-unknown {
    background: var(--color-bg);
    color: var(--color-text-secondary);
}

.station-detail-redesign .status-occupied {
    background: rgba(242, 140, 24, 0.14);
    color: #A34200;
}

.station-connector-action {
    width: 100%;
}

.station-connector-summary {
    margin: 12px 0 0;
    padding: 12px 14px;
    color: #41504C;
    background: #F6FAF9;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.station-how-grid,
.station-nearby-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.station-how-grid > div,
.station-nearby-card {
    padding: 16px;
    background: #FBFDFC;
    border: 1px solid #DDE8E5;
    border-radius: 10px;
}

.station-how-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 11px;
    color: #005A4B;
    background: #E5F5F1;
    border-radius: 11px;
    font-weight: 900;
}

.station-how-icon svg {
    width: 22px;
    height: 22px;
}

.station-how-grid h3 {
    margin: 0 0 6px;
    color: #17211f;
    font-size: 15px;
}

.station-how-grid p {
    margin: 0;
    color: #52615e;
    font-size: 13px;
}

.station-nearby-card {
    color: inherit;
}

.station-nearby-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.station-nearby-card strong,
.station-nearby-card span {
    display: block;
}

.station-nearby-card strong {
    color: var(--color-primary-dark);
}

.station-nearby-card span {
    margin-top: 7px;
    color: #52615e;
    font-size: 13px;
}

.station-nearby-card .station-nearby-price {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-weight: 900;
}

.station-map-card {
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #DDE8E5;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.station-detail-redesign .station-map {
    height: 260px;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.station-map-body {
    padding: 16px;
}

.station-map-body .btn {
    width: 100%;
}

.station-map-body .btn + .btn {
    margin-top: 10px;
}

.station-fact-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.station-fact-list div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #DDE8E5;
    font-size: 14px;
}

.station-fact-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.station-fact-list span {
    color: #52615e;
}

.station-fact-list strong {
    text-align: right;
}

@media (min-width: 641px) {
    .station-cost-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .station-insight-strip,
    .station-how-grid,
    .station-nearby-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 769px) {
    .station-detail-redesign .station-name {
        font-size: 46px;
    }

    .station-hero-grid,
    .station-content-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 28px;
    }

    .station-decision-card,
    .station-side-column {
        align-self: start;
    }

    .station-side-column {
        position: sticky;
        order: 0;
        top: 20px;
    }

    .station-cheaper-card {
        grid-template-columns: minmax(0, 1fr) 190px;
        align-items: center;
    }

    .station-cheaper-price {
        text-align: right;
    }

    .station-connector-row {
        grid-template-columns: minmax(0, 1fr) 90px 118px 124px;
        align-items: center;
        gap: 14px;
    }

    .station-connector-row:has(.station-connector-action) {
        grid-template-columns: minmax(0, 1fr) 90px 118px 112px 118px;
    }

    .station-cell-label {
        display: none;
    }

    .station-connector-action {
        width: auto;
        min-height: 38px;
        padding: 8px 12px;
    }
}

@media (min-width: 1025px) {
    .station-detail-redesign .station-name {
        font-size: 52px;
    }
}

@media (max-width: 520px) {
    .station-detail-redesign .station-hero {
        padding: 24px 0;
    }

    .station-detail-redesign .station-name {
        font-size: 31px;
    }

    .station-decision-price {
        font-size: 29px;
    }

    .station-panel {
        padding: 16px;
    }

    .station-panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

/* ============================================
   City Page Redesign
   ============================================ */

.city-redesign {
    overflow-x: clip;
}

.city-redesign .section {
    padding: 44px 0 0;
}

.city-redesign .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.city-redesign .section-head h2 {
    margin: 0;
    color: #17211f;
    font-size: 27px;
    line-height: 1.15;
}

.city-redesign .section-head p {
    margin: 7px 0 0;
    color: #52615e;
    line-height: 1.45;
}

.city-redesign .section-link {
    color: var(--color-primary-dark);
    font-weight: 900;
    white-space: nowrap;
}

.city-hero {
    position: relative;
    overflow: hidden;
    padding: 36px 0 30px;
    background:
        radial-gradient(circle at 22% 32%, rgba(0, 133, 110, 0.16), transparent 34%),
        linear-gradient(112deg, #ECF8F5 0%, #F8FBFA 52%, #EEF6F4 100%);
    border-bottom: 1px solid var(--color-border);
}

.city-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(28deg, transparent 0 46%, rgba(255, 255, 255, 0.72) 46% 51%, transparent 51%),
        linear-gradient(151deg, transparent 0 42%, rgba(255, 255, 255, 0.82) 42% 47%, transparent 47%),
        linear-gradient(0deg, transparent 0 49%, rgba(255, 255, 255, 0.7) 49% 52%, transparent 52%),
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.72) 48% 51%, transparent 51%);
    background-size: 270px 130px, 300px 160px, 170px 120px, 210px 160px;
    opacity: 0.55;
    pointer-events: none;
}

.city-hero-grid,
.city-stat-card-grid {
    position: relative;
    z-index: 1;
}

.city-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
    gap: 36px;
    align-items: center;
}

.city-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 12px;
    color: var(--color-primary-dark);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #CFE5DF;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.city-eyebrow span {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.city-hero h1 {
    max-width: 690px;
    margin: 0;
    color: #13201d;
    font-size: 58px;
    line-height: 0.98;
    letter-spacing: 0;
}

.city-hero h1 span {
    display: block;
    color: var(--color-primary-dark);
}

.city-hero h1 small {
    display: block;
    margin-top: 10px;
    color: #52615e;
    font-size: 18px;
}

.city-hero-subtitle {
    max-width: 660px;
    margin: 20px 0 0;
    color: #455550;
    font-size: 18px;
    line-height: 1.55;
}

.city-hero-search-wrap {
    position: relative;
    max-width: 650px;
    margin-top: 26px;
}

.city-hero-search {
    display: flex;
    gap: 10px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #CFDED9;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.city-hero-search input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    outline: 0;
    font: 700 15px var(--font-sans);
}

.city-hero-search button {
    min-height: 42px;
    padding: 0 24px;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: 0;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 133, 110, 0.25);
}

.city-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.city-quick-links a {
    padding: 7px 10px;
    color: #52615e;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #D8E6E2;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.city-quick-links a:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    text-decoration: none;
}

.city-hero-visual {
    min-width: 0;
}

.city-map-illustration {
    position: relative;
    width: 100%;
    height: clamp(330px, 29vw, 360px);
    min-width: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 30px;
    box-shadow: none;
}

.city-hero-static-map,
.city-hero-map-fade {
    position: absolute;
    inset: 0;
}

.city-hero-static-map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid rgba(0, 107, 90, 0.14);
    border-radius: 30px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
    filter: saturate(0.72) contrast(0.96) brightness(1.05);
}

.city-hero-map-fade {
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(246, 251, 249, 0.94) 0%, rgba(246, 251, 249, 0.42) 32%, rgba(246, 251, 249, 0.04) 72%),
        radial-gradient(circle at 20% 72%, rgba(0, 133, 110, 0.18), transparent 34%);
    pointer-events: none;
}

.city-static-map-marker {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #FFFFFF;
    background: var(--color-primary);
    border: 3px solid #FFFFFF;
    border-radius: 50% 50% 50% 12px;
    box-shadow: 0 15px 28px rgba(15, 23, 42, 0.18);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.city-static-map-marker svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(45deg);
}

.city-static-map-marker > span {
    position: absolute;
    left: 30px;
    top: -12px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    color: #17312c;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 107, 90, 0.14);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    transform: rotate(45deg);
}

.city-static-map-marker.marker-ac { background: #1D5FD8; }
.city-static-map-marker.marker-dc { background: #8A3800; }
.city-static-map-marker.marker-hpc { background: #9F1717; }

.city-static-map-marker.marker-ac > span {
    left: auto;
    right: 68px;
    top: -4px;
}

.city-static-map-marker.marker-dc > span {
    left: 22px;
    top: -26px;
}

.city-static-map-marker.marker-hpc > span {
    left: 68px;
    top: 8px;
}

.city-hero-price-card {
    position: absolute;
    z-index: 4;
    left: 18px;
    bottom: 18px;
    width: 238px;
    padding: 15px 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(12px);
}

.city-hero-price-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #52615e;
    font-size: 12px;
    font-weight: 900;
    text-transform: none;
}

.city-hero-price-card span::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.city-hero-price-card strong {
    display: block;
    margin-top: 8px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.city-hero-price-card p {
    margin: 8px 0 0;
    color: #52615e;
    font-size: 13px;
    line-height: 1.35;
}

.city-stat-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.city-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(16, 36, 32, 0.08);
}

.city-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: var(--color-primary);
    background: #E5F5F1;
    border-radius: 10px;
}

.city-stat-icon svg {
    width: 22px;
    height: 22px;
}

.city-stat-card > div strong,
.city-stat-card > div span {
    display: block;
}

.city-stat-card strong {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.city-stat-card div > span {
    margin-top: 3px;
    color: #455550;
    font-size: 13px;
    font-weight: 700;
}

.city-xlinks {
    padding-top: 14px;
}

.city-price-pulse {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}

.city-price-pulse-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    overflow-x: auto;
}

.city-pulse-title {
    flex: 0 0 auto;
    color: #2A3835;
    font-size: 13px;
    font-weight: 900;
}

.city-pulse-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 13px;
    color: #17211f;
    background: #F7FAF9;
    border: 1px solid #E8EFED;
    border-radius: 999px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.city-pulse-chip:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.city-pulse-chip b {
    padding: 4px 8px;
    color: #FFFFFF;
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 900;
}

.city-pulse-ac b { background: #1D5FD8; }
.city-pulse-dc b { background: #8A3800; }
.city-pulse-hpc b { background: #9F1717; }

.city-insight-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 0.9fr;
    gap: 18px;
}

.city-insight-card {
    display: block;
    min-width: 0;
    padding: 20px;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(16, 36, 32, 0.05);
}

.city-insight-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.city-insight-card-main {
    background: linear-gradient(135deg, #FFFFFF, #EEF9F6);
    border-color: #CFE5DF;
}

.city-insight-tag {
    display: inline-flex;
    margin-bottom: 13px;
    padding: 6px 9px;
    color: var(--color-primary-dark);
    background: #E4F5F0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.city-insight-card h3 {
    margin: 0 0 8px;
    color: #17211f;
    font-size: 19px;
    line-height: 1.25;
}

.city-insight-card p {
    margin: 0;
    color: #52615e;
    font-size: 14px;
    line-height: 1.45;
}

.city-insight-card strong {
    display: block;
    margin-top: 14px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.power-option-block {
    margin-top: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.power-option-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.power-option-head h3 {
    margin: 0;
    color: #17211f;
    font-size: 18px;
    line-height: 1.2;
}

.power-option-head p {
    margin: 0;
    color: #52615e;
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
}

.power-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.power-option-card {
    display: flex;
    min-width: 0;
    min-height: 158px;
    flex-direction: column;
    padding: 15px;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(16, 36, 32, 0.05);
}

.power-option-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.power-option-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 5px 8px;
    color: #455550;
    background: #F3F8F6;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
}

.power-option-ac .power-option-badge { color: #174EA6; background: #EAF1FF; }
.power-option-dc .power-option-badge { color: #8A3800; background: #FFF1E3; }
.power-option-hpc .power-option-badge { color: #9F1717; background: #FDECEC; }

.power-option-card strong {
    margin-top: 12px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.power-option-card h3 {
    margin: 12px 0 0;
    color: #17211f;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.power-option-card p {
    margin: auto 0 0;
    padding-top: 10px;
    color: #52615e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.city-power-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px;
    background: #EDF4F2;
    border: 1px solid #D7E6E2;
    border-radius: 12px;
}

.city-power-tabs .power-class-tab {
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-weight: 900;
}

.city-power-tabs .power-class-tab.active {
    background: var(--color-primary-dark);
    box-shadow: 0 8px 18px rgba(0, 133, 110, 0.20);
}

.city-finder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 408px;
    gap: 22px;
    align-items: start;
    min-height: 0;
}

.city-finder-layout .city-map-container,
.city-finder-panel {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(16, 36, 32, 0.06);
}

.city-finder-layout .city-map-container {
    position: sticky;
    top: 86px;
    overflow: hidden;
    min-width: 0;
}

.city-finder-layout .city-map {
    height: 560px;
    min-height: 560px;
}

.city-finder-panel {
    width: auto;
    min-width: 0;
    overflow: hidden;
}

.city-list-search {
    margin: 16px 16px 0;
    padding: 11px 12px;
    color: #52615e;
    background: #F7FAF9;
    border: 1px solid #DBE7E4;
    border-radius: 10px;
    font-weight: 800;
}

.city-finder-panel .filter-bar {
    gap: 8px;
    margin: 0;
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--color-border);
}

.city-finder-panel .filter-chip,
.city-finder-panel .filter-toggle {
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.city-finder-panel .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid var(--color-border);
    background: #FFFFFF;
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.city-finder-panel .filter-toggle svg {
    width: 15px;
    height: 15px;
}

.city-finder-panel .filter-toggle.active {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    background: #EAF7F4;
}

.city-finder-panel .filter-advanced {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}

.city-finder-panel .station-list {
    display: grid;
    gap: 10px;
    max-height: 635px;
    padding: 14px;
    overflow-y: auto;
}

.city-finder-panel .station-card {
    overflow: hidden;
    border-radius: 12px;
}

.city-finder-panel .station-card:first-of-type {
    border-color: #B7DED4;
    background: linear-gradient(135deg, #FFFFFF, #F0FAF7);
}

.city-finder-panel .station-card-link,
.city-all-stations-section .station-card-link {
    padding: 14px;
}

.city-finder-panel .station-card-header,
.city-all-stations-section .station-card-header {
    gap: 12px;
}

.city-finder-panel .station-card-info,
.city-all-stations-section .station-card-info {
    min-width: 0;
}

.city-finder-panel .station-card-name,
.city-all-stations-section .station-card-name {
    overflow-wrap: anywhere;
}

.city-finder-panel .station-card-details,
.city-all-stations-section .station-card-details {
    gap: 12px;
}

.city-finder-panel .station-card-scores,
.city-all-stations-section .station-card-scores {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.city-all-stations-section .station-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

.city-lower-section {
    padding-bottom: 42px;
}

.city-lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.city-list-panel {
    min-width: 0;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(16, 36, 32, 0.05);
}

.city-list-panel .section-head {
    margin-bottom: 8px;
}

.city-mini-list {
    display: grid;
}

.city-mini-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid #EDF2F0;
}

.city-mini-row:last-child {
    border-bottom: 0;
}

.city-mini-row:hover {
    text-decoration: none;
}

.city-mini-rank {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    color: var(--color-primary-dark);
    background: #E4F5F0;
    border-radius: 50%;
    font-weight: 900;
}

.city-mini-row strong,
.city-mini-row small,
.city-mini-row b {
    display: block;
}

.city-mini-row strong {
    color: #17211f;
    overflow-wrap: anywhere;
}

.city-mini-row small {
    margin-top: 3px;
    color: #52615e;
    font-size: 13px;
}

.city-mini-row b {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 14px;
    white-space: nowrap;
}

.city-hidden-operators {
    margin-top: 14px;
}

.city-faq-section {
    padding-bottom: 56px;
}

@media (max-width: 1024px) {
    .city-hero-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 28px;
    }

    .city-map-illustration {
        height: 330px;
    }

    .city-stat-card-grid,
    .city-insight-grid,
    .power-option-grid,
    .city-lower-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .city-finder-layout {
        grid-template-columns: 1fr;
    }

    .city-finder-layout .city-map-container {
        position: relative;
        top: auto;
    }

    .city-finder-panel .station-list {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .city-redesign .section {
        padding-top: 34px;
    }

    .city-redesign .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .city-hero {
        padding: 24px 0;
    }

    .city-hero-grid,
    .city-stat-card-grid,
    .city-insight-grid,
    .power-option-grid,
    .city-lower-grid {
        grid-template-columns: 1fr;
    }

    .power-option-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .power-option-head p {
        text-align: left;
    }

    .city-hero-visual {
        display: none;
    }

    .city-hero h1 {
        font-size: 42px;
    }

    .city-hero-subtitle {
        font-size: 16px;
    }

    .city-hero-search {
        flex-direction: column;
    }

    .city-hero-search button {
        width: 100%;
    }

    .city-stat-card-grid {
        gap: 12px;
        margin-top: 22px;
    }

    .city-price-pulse-inner {
        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .city-pulse-title {
        max-width: 80px;
        white-space: normal;
        line-height: 1.1;
    }

    .city-power-tabs {
        grid-template-columns: repeat(4, max-content);
        overflow-x: auto;
    }

    .city-power-tabs .power-class-tab {
        min-width: 96px;
    }

    .city-finder-layout .city-map {
        height: 330px;
        min-height: 330px;
    }

    .city-finder-panel .filter-bar {
        overflow-x: auto;
    }

    .city-finder-panel .station-card-details,
    .city-all-stations-section .station-card-details {
        align-items: stretch;
        flex-direction: column;
    }

    .city-finder-panel .station-card-scores,
    .city-all-stations-section .station-card-scores {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 430px) {
    .city-hero h1 {
        font-size: 36px;
    }

    .city-eyebrow {
        max-width: 100%;
        font-size: 12px;
    }

    .city-stat-card {
        padding: 15px;
    }

    .city-stat-card strong {
        font-size: 22px;
    }

    .city-insight-card strong {
        font-size: 25px;
    }

    .city-list-panel {
        padding: 16px;
    }

    .city-mini-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .city-mini-row b {
        grid-column: 2;
    }
}

/* ============================================
   Operator Page Redesign
   ============================================ */

.operator-redesign {
    overflow-x: clip;
}

.operator-redesign .section {
    padding: 44px 0 0;
}

.operator-redesign .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.operator-redesign .section-head h2 {
    margin: 0;
    color: #17211f;
    font-size: 27px;
    line-height: 1.15;
}

.operator-redesign .section-head p {
    margin: 7px 0 0;
    color: #52615e;
    line-height: 1.45;
}

.operator-redesign .section-link {
    color: var(--color-primary-dark);
    font-weight: 900;
    white-space: nowrap;
}

.operator-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 30px;
    background:
        radial-gradient(circle at 24% 28%, rgba(0, 133, 110, 0.16), transparent 34%),
        linear-gradient(112deg, #ECF8F5 0%, #F8FBFA 54%, #EEF6F4 100%);
    border-bottom: 1px solid var(--color-border);
}

.operator-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(28deg, transparent 0 46%, rgba(255, 255, 255, 0.72) 46% 51%, transparent 51%),
        linear-gradient(151deg, transparent 0 42%, rgba(255, 255, 255, 0.82) 42% 47%, transparent 47%),
        linear-gradient(0deg, transparent 0 49%, rgba(255, 255, 255, 0.7) 49% 52%, transparent 52%),
        linear-gradient(90deg, transparent 0 48%, rgba(255, 255, 255, 0.72) 48% 51%, transparent 51%);
    background-size: 270px 130px, 300px 160px, 170px 120px, 210px 160px;
    opacity: 0.55;
    pointer-events: none;
}

.operator-hero-grid,
.operator-stat-grid {
    position: relative;
    z-index: 1;
}

.operator-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 44px;
    align-items: start;
}

.operator-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 12px;
    color: var(--color-primary-dark);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #CFE5DF;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.operator-pill span {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.operator-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.operator-logo-mark {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    border-radius: 18px;
    box-shadow: 0 16px 32px rgba(0, 133, 110, 0.22);
    font-size: 28px;
    font-weight: 900;
}

.operator-hero h1 {
    min-width: 0;
    margin: 0;
    color: #13201d;
    font-size: 58px;
    line-height: 0.98;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.operator-hero h1 span {
    display: block;
    color: var(--color-primary-dark);
}

.operator-hero-subtitle {
    max-width: 680px;
    margin: 20px 0 0;
    color: #455550;
    font-size: 18px;
    line-height: 1.55;
}

.operator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.operator-decision-card {
    min-width: 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.operator-decision-label {
    display: block;
    color: #52615e;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.operator-decision-price {
    display: block;
    margin-top: 5px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

.operator-decision-card p {
    margin: 9px 0 0;
    color: #52615e;
    font-size: 14px;
    line-height: 1.45;
}

.operator-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.operator-decision-grid div {
    min-width: 0;
    padding: 11px 8px;
    text-align: center;
    background: #F3F8F7;
    border-radius: 10px;
}

.operator-decision-grid strong,
.operator-decision-grid span {
    display: block;
}

.operator-decision-grid strong {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
}

.operator-decision-grid span {
    margin-top: 3px;
    color: #52615e;
    font-size: 12px;
    font-weight: 700;
}

.operator-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.operator-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(16, 36, 32, 0.08);
}

.operator-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: var(--color-primary);
    background: #E5F5F1;
    border-radius: 10px;
}

.operator-stat-icon svg {
    width: 22px;
    height: 22px;
}

.operator-stat-card > div strong,
.operator-stat-card > div span {
    display: block;
}

.operator-stat-card strong {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.operator-stat-card div > span {
    margin-top: 3px;
    color: #455550;
    font-size: 13px;
    font-weight: 700;
}

.operator-xlinks {
    padding-top: 14px;
}

.xlink-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}

.xlink-card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 16px;
    color: #263633;
    background: #FFFFFF;
    border: 1px solid #DCE8E5;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.xlink-card:hover,
.xlink-card:focus-visible {
    border-color: rgba(0, 133, 110, 0.35);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.xlink-card-kicker {
    color: #60716D;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.xlink-card strong {
    color: var(--color-primary-dark);
    font-size: 15px;
    font-weight: 900;
}

.xlink-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.xlink-card-metric {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    background: #F3F8F7;
    border: 1px solid #E1EEEB;
    border-radius: 8px;
}

.xlink-card-metric b {
    color: #006B5A;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.xlink-card-metric small {
    color: #63736F;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
}

.xlink-card > span:last-child {
    color: #4C5B58;
    font-size: 13px;
    line-height: 1.45;
}

.xlink-card-ladestau {
    border-color: #F2D8BA;
    background: #FFF9F2;
}

.xlink-card-ladestau strong {
    color: #9A5A11;
}

.xlink-card-ladestau .xlink-card-metric {
    background: #FFF3E3;
    border-color: #F3D7B5;
}

.xlink-card-ladestau .xlink-card-metric b {
    color: #9A5A11;
}

@media (max-width: 720px) {
    .xlink-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .xlink-card-metrics {
        grid-template-columns: 1fr;
    }
}

.operator-price-pulse {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}

.operator-price-pulse-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    overflow-x: auto;
}

.operator-pulse-title {
    flex: 0 0 auto;
    color: #2A3835;
    font-size: 13px;
    font-weight: 900;
}

.operator-pulse-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 13px;
    color: #17211f;
    background: #F7FAF9;
    border: 1px solid #E8EFED;
    border-radius: 999px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.operator-pulse-chip b {
    padding: 4px 8px;
    color: #FFFFFF;
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 900;
}

.operator-pulse-ac b { background: #1D5FD8; }
.operator-pulse-dc b { background: #8A3800; }
.operator-pulse-hpc b { background: #9F1717; }

.operator-insight-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 0.9fr;
    gap: 18px;
}

.operator-insight-card {
    display: block;
    min-width: 0;
    padding: 20px;
    color: inherit;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(16, 36, 32, 0.05);
}

.operator-insight-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.operator-insight-card-main {
    background: linear-gradient(135deg, #FFFFFF, #EEF9F6);
    border-color: #CFE5DF;
}

.operator-insight-tag {
    display: inline-flex;
    margin-bottom: 13px;
    padding: 6px 9px;
    color: var(--color-primary-dark);
    background: #E4F5F0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.operator-insight-card h3 {
    margin: 0 0 8px;
    color: #17211f;
    font-size: 19px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.operator-insight-card p {
    margin: 0;
    color: #52615e;
    font-size: 14px;
    line-height: 1.45;
}

.operator-insight-card strong {
    display: block;
    margin-top: 14px;
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.operator-coverage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 22px;
    align-items: start;
}

.operator-coverage-map,
.operator-list-panel {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(16, 36, 32, 0.06);
}

.operator-coverage-map {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    background: #EAF2EF;
}

.operator-real-map {
    width: 100%;
    height: 430px;
    min-height: 430px;
}

.operator-list-panel {
    min-width: 0;
    padding: 20px;
}

.operator-list-panel .section-head {
    margin-bottom: 8px;
}

.operator-mini-list {
    display: grid;
}

.operator-mini-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #EDF2F0;
}

.operator-mini-row:last-child {
    border-bottom: 0;
}

.operator-mini-row:hover {
    text-decoration: none;
}

.operator-mini-rank {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    color: var(--color-primary-dark);
    background: #E4F5F0;
    border-radius: 50%;
    font-weight: 900;
}

.operator-mini-row strong,
.operator-mini-row small,
.operator-mini-row b {
    display: block;
}

.operator-mini-row strong {
    color: #17211f;
    overflow-wrap: anywhere;
}

.operator-mini-row small {
    margin-top: 3px;
    color: #52615e;
    font-size: 13px;
}

.operator-mini-row b {
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 14px;
    white-space: nowrap;
}

.operator-stations-section .station-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

.operator-stations-section .station-card-link {
    padding: 14px;
}

.operator-stations-section .station-card-info {
    min-width: 0;
}

.operator-stations-section .station-card-name {
    overflow-wrap: anywhere;
}

.operator-stations-section .station-card-details {
    gap: 12px;
}

.operator-stations-section .station-card-scores {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.operator-trust-section {
    padding-bottom: 56px;
}

.operator-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.operator-trust-card {
    min-width: 0;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.operator-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 13px;
    color: #005A4B;
    background: #E5F5F1;
    border-radius: 11px;
}

.operator-trust-icon svg {
    width: 22px;
    height: 22px;
}

.operator-trust-card h3 {
    margin: 0 0 7px;
    color: #17211f;
    font-size: 17px;
}

.operator-trust-card p {
    margin: 0;
    color: #52615e;
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .operator-hero-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
    }

    .operator-stat-grid,
    .operator-insight-grid,
    .power-option-grid,
    .operator-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operator-coverage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .operator-redesign .section {
        padding-top: 34px;
    }

    .operator-redesign .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .operator-hero {
        padding: 26px 0;
    }

    .operator-hero-grid,
    .operator-stat-grid,
    .operator-insight-grid,
    .power-option-grid,
    .operator-trust-grid {
        grid-template-columns: 1fr;
    }

    .operator-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .operator-logo-mark {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        font-size: 22px;
    }

    .operator-hero h1 {
        font-size: 40px;
    }

    .operator-hero-subtitle {
        font-size: 16px;
    }

    .operator-actions {
        flex-direction: column;
    }

    .operator-actions .btn {
        width: 100%;
    }

    .operator-stat-grid {
        gap: 12px;
        margin-top: 22px;
    }

    .operator-price-pulse-inner {
        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .operator-pulse-title {
        max-width: 82px;
        white-space: normal;
        line-height: 1.1;
    }

    .operator-coverage-map {
        min-height: 320px;
    }

    .operator-real-map {
        height: 320px;
        min-height: 320px;
    }

    .operator-stations-section .station-card-details {
        align-items: stretch;
        flex-direction: column;
    }

    .operator-stations-section .station-card-scores {
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 430px) {
    .operator-hero h1 {
        font-size: 32px;
    }

    .operator-decision-price {
        font-size: 30px;
    }

    .operator-decision-grid strong {
        font-size: 18px;
    }

    .operator-stat-card {
        padding: 15px;
    }

    .operator-stat-card strong {
        font-size: 22px;
    }

    .operator-insight-card strong {
        font-size: 25px;
    }

    .operator-list-panel {
        padding: 16px;
    }

    .operator-mini-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .operator-mini-row b {
        grid-column: 2;
    }
}

/* ============================================
   Typography Softening
   Keeps the same hierarchy, with less visual bite.
   ============================================ */

.xlink-card-kicker,
.xlink-card-metric small,
.page-map .karte-search-context p,
.page-map .karte-search-context-loading,
.page-map .karte-context-result small,
.page-map .karte-selected-preview small,
.page-map .karte-map-topbar span {
    font-weight: 600;
}

.xlink-card strong,
.xlink-card-metric b,
.page-map .karte-back-link,
.page-map .karte-kicker,
.page-map .karte-locate-btn,
.page-map .karte-context-kicker,
.page-map .karte-search-context strong,
.page-map .karte-context-result span,
.page-map .karte-control-head span,
.page-map .filter-toggle,
.page-map .filter-chip,
.page-map .filter-slider > span,
.page-map .karte-map-status,
.page-map .karte-preview-label,
.page-map .karte-selected-preview strong,
.page-map .karte-preview-bottom a,
.page-map .karte-station-name,
.page-map .karte-station-operator,
.page-map .karte-station-connectors span,
.page-map .karte-station-power,
.page-map .karte-station-meta,
.page-map .karte-station-link,
.page-map .karte-map-topbar strong,
.page-map .karte-mobile-toggle {
    font-weight: 700;
}

.station-detail-redesign .btn,
.station-decision-label,
.station-operator-pill,
.station-trust-row span,
.station-trust-row a,
.station-power-price span,
.station-decision-links a,
.station-cell-label,
.station-detail-redesign .status,
.station-cheaper-class,
.city-redesign .section-link,
.city-eyebrow,
.city-hero-search button,
.city-quick-links a,
.city-hero-price-card span,
.city-pulse-title,
.city-pulse-chip,
.city-pulse-chip b,
.city-insight-tag,
.power-option-badge,
.city-power-tabs .power-class-tab,
.city-finder-panel .filter-chip,
.city-finder-panel .filter-toggle,
.city-mini-rank,
.operator-redesign .section-link,
.operator-pill,
.operator-decision-label,
.operator-decision-grid span,
.operator-pulse-title,
.operator-pulse-chip,
.operator-pulse-chip b,
.operator-insight-tag,
.operator-mini-rank,
.city-ranking-eyebrow,
.city-ranking-decision span,
.city-ranking-trust-row a {
    font-weight: 700;
}

.city-hero-search input {
    font-weight: 600;
}

.station-decision-price,
.station-power-price strong,
.station-decision-advice strong,
.station-cost-grid strong,
.station-nearby-verdict-card strong,
.station-nearby-verdict-card p,
.station-cheaper-price b,
.station-cheaper-status strong,
.station-connector-power,
.station-connector-price,
.station-how-icon,
.station-nearby-card .station-nearby-price,
.city-hero-price-card strong,
.city-stat-card strong,
.city-insight-card strong,
.power-option-card strong,
.operator-decision-price,
.operator-decision-grid strong,
.operator-logo-mark,
.operator-stat-card strong,
.operator-insight-card strong,
.city-ranking-rank,
.city-ranking-explain-grid span,
.page-map .karte-preview-power,
.page-map .karte-preview-price,
.page-map .karte-station-rank {
    font-weight: 800;
}
.station-price-confidence{display:flex;justify-content:space-between;gap:12px;margin:0 0 16px;padding:11px 13px;border-left:4px solid #1d8f61;background:#effaf5;border-radius:7px;color:#24433a}.station-price-confidence.confidence-medium{border-color:#d29318;background:#fff8e8}.station-price-confidence.confidence-low{border-color:#c84b4b;background:#fff1f1}.station-price-confidence span{font-size:.85rem}.charge-cost-calculator{display:grid;grid-template-columns:1.6fr repeat(3,1fr) 1.5fr;gap:12px;align-items:end;margin:20px 0;padding:18px;background:#f5f7fa;border:1px solid #dce3eb;border-radius:12px}.charge-cost-calculator h3{margin:0 0 4px}.charge-cost-calculator p{margin:0;color:#667085;font-size:.86rem}.charge-cost-calculator label{display:grid;gap:6px;color:#475467;font-size:.78rem;font-weight:700}.charge-cost-calculator label span{display:flex;align-items:center;gap:5px}.charge-cost-calculator input{width:75px;padding:9px;border:1px solid #cbd5e1;border-radius:7px}.charge-cost-result{display:grid;padding-left:14px;border-left:1px solid #ccd5e1}.charge-cost-result strong{font-size:1.55rem;color:#10243e}.charge-cost-result small{color:#667085}.station-data-correction{margin-top:14px;color:#667085;font-size:.88rem}@media(max-width:900px){.charge-cost-calculator{grid-template-columns:1fr 1fr}.charge-cost-calculator-copy,.charge-cost-result{grid-column:1/-1}}@media(max-width:520px){.station-price-confidence{display:grid}.charge-cost-calculator{grid-template-columns:1fr}.charge-cost-calculator-copy,.charge-cost-result{grid-column:auto}}