.gc-vent__toggle {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
padding: 10px 12px;
background: rgba(69,131,207,0.06);
border: 1px solid rgba(69,131,207,0.18);
border-radius: 10px;
font-size: 0.88rem;
}
.gc-vent__toggle-label {
font-weight: 600;
color: #0f172a;
margin-right: 4px;
}
.gc-vent__toggle button {
padding: 6px 14px;
border: 1px solid rgba(15,23,42,0.15);
background: #fff;
border-radius: 18px;
cursor: pointer;
font-size: 0.86rem;
font-weight: 500;
color: #0f172a;
transition: background-color 120ms ease, border-color 120ms ease;
}
.gc-vent__toggle button:hover {
background: #f3f4f6;
border-color: rgba(15,23,42,0.25);
}
.gc-vent__toggle button[aria-pressed="true"] {
background: #4583cf;
border-color: #4583cf;
color: #fff;
}
.gc-vent__toggle-hint {
flex: 1 1 auto;
min-width: 0;
font-size: 0.76rem;
color: #64748b;
font-style: italic;
}
@media (max-width: 600px) {
.gc-vent__toggle-hint { width: 100%; flex: 0 0 auto; margin-top: 4px; }
}
.gc-vanf {
--gca-bg: #fff;
--gca-border: rgba(15,23,42,0.08);
--gca-text: #0f172a;
--gca-muted: #64748b;
--gca-info: #4583cf;
--gca-info-bg: rgba(69,131,207,0.06);
--gca-good: #10b981;
--gca-mid: #f59e0b;
--gca-bad: #f97316;
--gca-extreme: #dc2626;
background: var(--gca-info-bg);
border: 1px solid rgba(69,131,207,0.18);
border-radius: 14px;
padding: 20px 22px 18px;
margin: 1.5rem 0;
color: var(--gca-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
width: 100%;
}
.gc-vanf *, .gc-vanf *::before, .gc-vanf *::after { box-sizing: border-box; }
.gc-vanf__header { margin-bottom: 14px; }
.gc-vanf__title { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; margin: 0 0 4px; line-height: 1.25; color: var(--gca-info); }
.gc-vanf__subtitle { font-size: 0.9rem; color: var(--gca-muted); margin: 0; line-height: 1.45; }
.gc-vanf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.gc-vanf__loading { grid-column: 1 / -1; text-align: center; color: var(--gca-muted); padding: 18px; }
.gc-vanf-card {
background: var(--gca-bg);
border: 1px solid var(--gca-border);
border-left-width: 4px;
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.gc-vanf-card--gut    { border-left-color: var(--gca-good); }
.gc-vanf-card--mittel { border-left-color: var(--gca-mid); }
.gc-vanf-card--schwer { border-left-color: var(--gca-bad); }
.gc-vanf-card--extrem { border-left-color: var(--gca-extreme); }
.gc-vanf-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gc-vanf-card__name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--gca-text); }
.gc-vanf-card__score { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; color: var(--gca-text); }
.gc-vanf-card--gut .gc-vanf-card__score    { color: var(--gca-good); }
.gc-vanf-card--mittel .gc-vanf-card__score { color: var(--gca-mid); }
.gc-vanf-card--schwer .gc-vanf-card__score { color: var(--gca-bad); }
.gc-vanf-card--extrem .gc-vanf-card__score { color: var(--gca-extreme); }
.gc-vanf-card__meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--gca-muted); }
.gc-vanf-card__strecke { flex: 1 1 auto; }
.gc-vanf-card__arrow { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(16,185,129,0.10); color: #047857; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.gc-vanf-card__km { font-variant-numeric: tabular-nums; }
.gc-vanf-card__pill {
display: inline-block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
padding: 2px 10px;
border-radius: 999px;
width: fit-content;
}
.gc-vanf-card--gut .gc-vanf-card__pill    { background: rgba(16,185,129,0.12); color: var(--gca-good); }
.gc-vanf-card--mittel .gc-vanf-card__pill { background: rgba(245,158,11,0.18); color: #b45309; }
.gc-vanf-card--schwer .gc-vanf-card__pill { background: rgba(249,115,22,0.15); color: #c2410c; }
.gc-vanf-card--extrem .gc-vanf-card__pill { background: rgba(220,38,38,0.15); color: #b91c1c; }
.gc-vanf-card__empfehlung { font-size: 0.85rem; color: var(--gca-text); line-height: 1.4; border-top: 1px solid var(--gca-border); padding-top: 6px; margin-top: 2px; }
.gc-vanf__footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gca-border); font-size: 0.78rem; color: var(--gca-muted); text-align: right; }
@media (prefers-color-scheme: dark) {
.gc-vanf { --gca-bg: #0f172a; --gca-border: rgba(255,255,255,0.1); --gca-text: #f1f5f9; --gca-muted: #94a3b8; --gca-info-bg: rgba(69,131,207,0.10); }
.gc-vanf-card { background: rgba(255,255,255,0.02); }
} .gc-vmap {
background: #fff;
border: 1px solid rgba(15,23,42,0.08);
border-radius: 14px;
padding: 18px 22px;
margin: 1.5rem 0;
box-sizing: border-box;
width: 100%;
}
.gc-vmap__title { font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 700; margin: 0 0 12px; line-height: 1.25; color: #0f172a; }
.gc-vmap__container { position: relative; width: 100%; }
.gc-vmap__svg { width: 100%; height: auto; display: block; }
.gc-vmap__hint { font-size: 0.85rem; color: #64748b; margin-top: 8px; line-height: 1.4; }
@media (prefers-color-scheme: dark) {
.gc-vmap { background: #0f172a; border-color: rgba(255,255,255,0.1); }
.gc-vmap__title { color: #f1f5f9; }
.gc-vmap__hint { color: #94a3b8; }
} .gc-vmap__leaflet {
width: 100%;
border-radius: 10px;
overflow: hidden;
background: #eef2f6;
z-index: 0;
}
.gc-vmap__leaflet .leaflet-container { font-family: inherit; }
.gc-vmap__legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 10px;
padding: 8px 12px;
background: rgba(15,23,42,0.03);
border-radius: 8px;
font-size: 0.78rem;
color: #64748b;
}
.gc-vmap__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.gc-vmap__legend-line { display: inline-block; width: 20px; height: 4px; border-radius: 2px; }
.gc-vmap__legend-line--gut    { background: #10b981; }
.gc-vmap__legend-line--mittel { background: #f59e0b; }
.gc-vmap__legend-line--schwer { background: #f97316; }
.gc-vmap__legend-line--extrem { background: #dc2626; }
@media (prefers-color-scheme: dark) {
.gc-vmap__leaflet { background: #1e293b; }
.gc-vmap__legend { background: rgba(255,255,255,0.04); color: #94a3b8; }
}  .gc-vanf-card__name,
.gc-vanf-card__score,
.gc-vanf-card__strecke,
.gc-vanf-card__km,
.gc-vanf-card__empfehlung,
.gc-vanf-card__arrow,
.gc-vanf-card__pill {
color: inherit !important;
visibility: visible !important;
opacity: 1 !important;
}
.gc-vanf-card__name { color: var(--gca-text) !important; }
.gc-vanf-card--gut .gc-vanf-card__score    { color: var(--gca-good) !important; }
.gc-vanf-card--mittel .gc-vanf-card__score { color: var(--gca-mid) !important; }
.gc-vanf-card--schwer .gc-vanf-card__score { color: var(--gca-bad) !important; }
.gc-vanf-card--extrem .gc-vanf-card__score { color: var(--gca-extreme) !important; }
.gc-vanf-card__strecke,
.gc-vanf-card__km { color: var(--gca-muted) !important; }
.gc-vanf-card__empfehlung { color: var(--gca-text) !important; } .gc-vscore, .gc-vscore-legend, .gc-vanf, .gc-vmap, .gc-verkehr-live {
margin: 0.75rem 0 !important;
padding: 14px 16px !important;
} .gc-vscore__header, .gc-vanf__header { margin-bottom: 10px !important; }
.gc-vscore__title, .gc-vanf__title, .gc-vmap__title { margin: 0 0 4px !important; }
.gc-vscore__subtitle, .gc-vanf__subtitle { margin: 0 !important; } .gc-vanf-card, .gc-vs-card { padding: 10px 12px !important; gap: 4px !important; }
.gc-vanf-card__head, .gc-vs-card__head { margin-bottom: 2px; } .gc-vanf__footer, .gc-vscore__footer {
margin-top: 10px !important;
padding-top: 8px !important;
font-size: 0.72rem !important;
} .gc-vanf__grid, .gc-vscore__grid { gap: 8px !important; } .gc-vmap { padding: 14px 16px !important; }
.gc-vmap__title { margin: 0 0 8px !important; }
.gc-vmap__legend { margin-top: 8px !important; padding: 6px 10px !important; }
.gc-vmap__hint { margin-top: 6px !important; font-size: 0.78rem !important; } .gc-vscore-legend__intro, .gc-vscore-legend__bridge, .gc-vscore-legend__hint {
font-size: 0.88rem !important;
margin: 0 0 10px !important;
}
.gc-vscore-legend__hint { margin: 10px 0 0 !important; padding-top: 10px !important; }
.gc-vscore-legend__formula { margin: 0 0 12px !important; padding: 10px !important; gap: 6px !important; }
.gc-vscore-legend__formula-item { padding: 8px 8px !important; }
.gc-vscore-legend__formula-value { font-size: 1.2rem !important; margin-bottom: 2px !important; }
.gc-vscore-legend__formula-label { font-size: 0.78rem !important; }
.gc-vscore-legend__formula-desc { font-size: 0.68rem !important; }
.gc-vscore-legend__stages { gap: 8px !important; margin: 0 0 4px !important; }
.gc-vscore-legend__stage { padding: 10px 12px !important; gap: 4px !important; }
.gc-vscore-legend__stage-action { font-size: 0.82rem !important; } .gc-vanf-card {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.10) !important;
border-left-width: 4px !important;
border-radius: 10px !important;
}
.gc-vanf-card--gut    { border-left-color: #10b981 !important; }
.gc-vanf-card--mittel { border-left-color: #f59e0b !important; }
.gc-vanf-card--schwer { border-left-color: #f97316 !important; }
.gc-vanf-card--extrem { border-left-color: #dc2626 !important; }
.gc-vanf-card__name { color: #0f172a !important; font-weight: 700 !important; }
.gc-vanf-card__score { color: #0f172a !important; font-weight: 700 !important; }
.gc-vanf-card--gut .gc-vanf-card__score    { color: #10b981 !important; }
.gc-vanf-card--mittel .gc-vanf-card__score { color: #f59e0b !important; }
.gc-vanf-card--schwer .gc-vanf-card__score { color: #f97316 !important; }
.gc-vanf-card--extrem .gc-vanf-card__score { color: #dc2626 !important; }
.gc-vanf-card__strecke { color: #64748b !important; }
.gc-vanf-card__km { color: #64748b !important; }
.gc-vanf-card__empfehlung { color: #1e293b !important; border-top: 1px solid rgba(15,23,42,0.08) !important; } .gc-vanf-card__arrow {
background: rgba(16,185,129,0.14) !important;
color: #047857 !important;
border-radius: 999px !important;
padding: 2px 10px !important;
font-weight: 600 !important;
font-size: 0.72rem !important;
}
.gc-vanf-card__pill {
border-radius: 999px !important;
padding: 2px 10px !important;
font-weight: 600 !important;
font-size: 0.7rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
.gc-vanf-card--gut .gc-vanf-card__pill    { background: rgba(16,185,129,0.14) !important; color: #047857 !important; }
.gc-vanf-card--mittel .gc-vanf-card__pill { background: rgba(245,158,11,0.20) !important; color: #b45309 !important; }
.gc-vanf-card--schwer .gc-vanf-card__pill { background: rgba(249,115,22,0.18) !important; color: #c2410c !important; }
.gc-vanf-card--extrem .gc-vanf-card__pill { background: rgba(220,38,38,0.18) !important; color: #b91c1c !important; } .gc-vanf {
background: #f8fafc !important;
border: 1px solid rgba(15,23,42,0.06) !important;
}
.gc-vanf__title { color: #185fa5 !important; }
.gc-vanf__subtitle { color: #64748b !important; }
.gc-vanf__footer { color: #64748b !important; border-top: 1px solid rgba(15,23,42,0.08) !important; } .gc-vsevere {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
border: 1px solid rgba(220, 38, 38, 0.30) !important;
border-left: 5px solid #dc2626 !important;
border-radius: 12px !important;
padding: 14px 18px !important;
margin: 0 0 16px !important;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.12), 0 1px 3px rgba(220, 38, 38, 0.06) !important;
color: #7f1d1d !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
box-sizing: border-box !important;
width: 100% !important;
animation: gcVsevereSlide 380ms ease-out !important;
}
.gc-vsevere[hidden] { display: none !important; }
@keyframes gcVsevereSlide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.gc-vsevere__inner { display: flex; align-items: flex-start; gap: 12px; }
.gc-vsevere__icon {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: #dc2626;
color: #fff;
display: flex; align-items: center; justify-content: center;
animation: gcVseverePulse 1.6s infinite;
}
@keyframes gcVseverePulse {
0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.gc-vsevere__body { flex: 1 1 auto; min-width: 0; }
.gc-vsevere__head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 6px;
}
.gc-vsevere__pill {
display: inline-flex; align-items: center;
background: #dc2626; color: #fff;
font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.gc-vsevere__title {
font-size: 1rem !important; font-weight: 700 !important;
color: #7f1d1d !important; line-height: 1.3 !important;
}
.gc-vsevere__count {
font-size: 0.78rem !important; color: #991b1b !important;
font-variant-numeric: tabular-nums;
}
.gc-vsevere__list {
list-style: none !important; margin: 4px 0 6px !important; padding: 0 !important;
font-size: 0.86rem !important; line-height: 1.45 !important;
}
.gc-vsevere__list li {
padding: 3px 0 !important;
color: #7f1d1d !important;
list-style: none !important;
}
.gc-vsevere__list li strong { color: #991b1b !important; }
.gc-vsevere__hint {
margin: 4px 0 0 !important;
font-size: 0.8rem !important;
color: #991b1b !important;
line-height: 1.4 !important;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
.gc-vsevere {
background: linear-gradient(135deg, rgba(220,38,38,0.18) 0%, rgba(127,29,29,0.30) 100%) !important;
border-color: rgba(220, 38, 38, 0.45) !important;
color: #fecaca !important;
}
.gc-vsevere__title { color: #fecaca !important; }
.gc-vsevere__count, .gc-vsevere__list li, .gc-vsevere__hint { color: #fca5a5 !important; }
.gc-vsevere__list li strong { color: #fecaca !important; }
} .gc-vsevere,
.gc-vsevere * {
opacity: 1 !important;
visibility: visible !important;
}
.gc-vsevere__title {
color: #450a0a !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
}
.gc-vsevere__count {
color: #7f1d1d !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
opacity: 1 !important;
}
.gc-vsevere__list {
margin: 6px 0 !important;
padding: 0 !important;
}
.gc-vsevere__list li {
padding: 4px 0 !important;
color: #450a0a !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
font-weight: 500 !important;
opacity: 1 !important;
border: none !important;
}
.gc-vsevere__list li::before { content: none !important; }
.gc-vsevere__list li strong {
color: #7f1d1d !important;
font-weight: 700 !important;
}
.gc-vsevere__hint {
color: #7f1d1d !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
font-style: normal !important;
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px solid rgba(220, 38, 38, 0.20) !important;
}
.gc-vsevere__pill {
background: #dc2626 !important;
color: #ffffff !important;
font-weight: 700 !important;
}
@media (prefers-color-scheme: dark) {
.gc-vsevere__title { color: #fee2e2 !important; }
.gc-vsevere__count { color: #fecaca !important; }
.gc-vsevere__list li { color: #fee2e2 !important; }
.gc-vsevere__list li strong { color: #fecaca !important; }
.gc-vsevere__hint { color: #fecaca !important; border-top-color: rgba(248,113,113,0.30) !important; }
} .gc-vsevere {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
border-left: 4px solid #dc2626 !important;
border-radius: 10px !important;
padding: 16px 20px !important;
margin: 0 0 18px !important;
box-shadow: none !important;
color: #450a0a !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
box-sizing: border-box !important;
width: 100% !important;
animation: none !important;
}
.gc-vsevere[hidden] { display: none !important; }
.gc-vsevere__inner { display: flex !important; align-items: flex-start !important; gap: 14px !important; }
.gc-vsevere__icon {
flex-shrink: 0 !important;
width: 36px !important; height: 36px !important;
border-radius: 8px !important;
background: #dc2626 !important;
color: #fff !important;
display: flex !important; align-items: center !important; justify-content: center !important;
animation: none !important;
box-shadow: none !important;
}
.gc-vsevere__icon svg { width: 20px; height: 20px; }
.gc-vsevere__body { flex: 1 1 auto !important; min-width: 0 !important; }
.gc-vsevere__head {
display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important;
margin-bottom: 6px !important;
}
.gc-vsevere__pill {
display: inline-flex !important; align-items: center !important;
background: #dc2626 !important; color: #ffffff !important;
font-size: 0.62rem !important; text-transform: uppercase !important; letter-spacing: 0.10em !important;
font-weight: 700 !important; padding: 3px 8px !important; border-radius: 4px !important;
line-height: 1 !important;
}
.gc-vsevere__title {
font-size: 1rem !important; font-weight: 700 !important;
color: #7f1d1d !important; line-height: 1.3 !important;
margin: 0 !important;
}
.gc-vsevere__count {
font-size: 0.78rem !important; color: #991b1b !important;
font-weight: 500 !important; opacity: 0.85 !important;
}
.gc-vsevere__list {
list-style: none !important; margin: 4px 0 !important; padding: 0 !important;
font-size: 0.88rem !important; line-height: 1.5 !important;
}
.gc-vsevere__list li {
padding: 2px 0 !important;
color: #450a0a !important;
font-weight: 400 !important;
list-style: none !important;
border: none !important;
}
.gc-vsevere__list li::before { content: none !important; }
.gc-vsevere__list li::marker { content: none !important; }
.gc-vsevere__list li strong {
color: #7f1d1d !important;
font-weight: 600 !important;
}
.gc-vsevere__hint {
margin: 8px 0 0 !important;
padding: 8px 10px !important;
background: rgba(220, 38, 38, 0.08) !important;
border-radius: 6px !important;
font-size: 0.85rem !important;
color: #7f1d1d !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.4 !important;
border: none !important;
border-top: none !important;
}
.gc-vsevere__hint::before {
content: "→ ";
font-weight: 700;
color: #dc2626;
margin-right: 2px;
}
@media (prefers-color-scheme: dark) {
.gc-vsevere {
background: rgba(127, 29, 29, 0.20) !important;
border-color: rgba(220, 38, 38, 0.30) !important;
}
.gc-vsevere__title { color: #fee2e2 !important; }
.gc-vsevere__count { color: #fca5a5 !important; }
.gc-vsevere__list li { color: #fee2e2 !important; }
.gc-vsevere__list li strong { color: #fecaca !important; }
.gc-vsevere__hint { background: rgba(220, 38, 38, 0.18) !important; color: #fecaca !important; }
.gc-vsevere__hint::before { color: #fca5a5; }
} .gc-vsevere__list li {
padding: 5px 0 !important;
line-height: 1.55 !important;
}
.gc-vsevere__list li + li {
border-top: 1px solid rgba(220, 38, 38, 0.12) !important;
margin-top: 2px !important;
padding-top: 7px !important;
} .gc-vsevere {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
border-left: 4px solid #dc2626 !important;
color: #450a0a !important;
}
.gc-vsevere__title {
color: #7f1d1d !important;
background: transparent !important;
}
.gc-vsevere__count {
color: #991b1b !important;
}
.gc-vsevere__list {
background: transparent !important;
}
.gc-vsevere__list li {
color: #450a0a !important;
background: transparent !important;
}
.gc-vsevere__list li strong {
color: #7f1d1d !important;
}
.gc-vsevere__hint {
background: rgba(220, 38, 38, 0.10) !important;
color: #7f1d1d !important;
}
.gc-vsevere__hint::before { color: #dc2626 !important; } .gc-vsevere__list li > span:first-child[style] {
background: rgba(220, 38, 38, 0.18) !important;
color: #7f1d1d !important;
} @media (prefers-color-scheme: dark) {
.gc-vsevere,
.gc-vsevere__title,
.gc-vsevere__count,
.gc-vsevere__list,
.gc-vsevere__list li,
.gc-vsevere__list li strong,
.gc-vsevere__hint { background: revert !important;
color: revert !important;
}
.gc-vsevere {
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
border-left: 4px solid #dc2626 !important;
color: #450a0a !important;
}
.gc-vsevere__title { color: #7f1d1d !important; }
.gc-vsevere__count { color: #991b1b !important; }
.gc-vsevere__list li { color: #450a0a !important; }
.gc-vsevere__list li strong { color: #7f1d1d !important; }
.gc-vsevere__hint {
background: rgba(220, 38, 38, 0.10) !important;
color: #7f1d1d !important;
}
} .gc-vent {
background: #f8fafc !important;
border: 1px solid rgba(15,23,42,0.08) !important;
border-radius: 12px !important;
padding: 16px 18px !important;
margin: 0 0 16px !important;
color: #0f172a !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
box-sizing: border-box !important;
width: 100% !important;
}
.gc-vent__header { margin-bottom: 12px !important; }
.gc-vent__title {
font-size: clamp(1rem, 1.7vw, 1.2rem) !important;
font-weight: 700 !important;
color: #185fa5 !important;
margin: 0 0 4px !important;
line-height: 1.3 !important;
}
.gc-vent__subtitle {
font-size: 0.85rem !important;
color: #64748b !important;
margin: 0 0 6px !important;
line-height: 1.45 !important;
}
.gc-vent__jetzt {
font-size: 0.82rem !important;
color: #185fa5 !important;
font-weight: 600 !important;
margin: 0 !important;
}
.gc-vent__grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 10px !important;
}
.gc-vent__loading {
grid-column: 1 / -1 !important;
text-align: center !important;
color: #64748b !important;
padding: 18px !important;
}
.gc-vent-card {
background: #ffffff !important;
border: 1px solid rgba(15,23,42,0.10) !important;
border-left-width: 4px !important;
border-radius: 10px !important;
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.gc-vent-card--gut    { border-left-color: #10b981 !important; }
.gc-vent-card--mittel { border-left-color: #f59e0b !important; }
.gc-vent-card--schwer { border-left-color: #f97316 !important; }
.gc-vent-card--extrem { border-left-color: #dc2626 !important; }
.gc-vent-card--best {
background: #f0fdf4 !important;
border: 2px solid #10b981 !important;
border-left: 4px solid #10b981 !important;
}
.gc-vent-card__head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.gc-vent-card__name {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #0f172a !important;
flex: 1 1 auto !important;
}
.gc-vent-card__best-badge {
background: #10b981 !important;
color: #ffffff !important;
font-size: 0.65rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 4px !important;
}
.gc-vent-card__meta {
font-size: 0.78rem !important;
color: #64748b !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 4px 10px !important;
}
.gc-vent-card__meta b { color: #0f172a !important; font-weight: 600 !important; }
.gc-vent-card__route {
font-size: 0.78rem !important;
color: #475569 !important;
line-height: 1.4 !important;
}
.gc-vent-card__eta {
margin-top: 4px !important;
padding: 8px 10px !important;
background: rgba(69, 131, 207, 0.06) !important;
border-radius: 6px !important;
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 8px !important;
}
.gc-vent-card__eta-label {
font-size: 0.72rem !important;
color: #185fa5 !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
.gc-vent-card__eta-time {
font-size: 1.15rem !important;
font-weight: 700 !important;
color: #185fa5 !important;
font-variant-numeric: tabular-nums !important;
}
.gc-vent-card__eta-day {
font-size: 0.7rem !important;
color: #64748b !important;
margin-left: 4px !important;
}
.gc-vent-card__pill {
display: inline-flex !important;
align-items: center !important;
font-size: 0.66rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-weight: 600 !important;
padding: 2px 8px !important;
border-radius: 999px !important;
width: fit-content !important;
}
.gc-vent-card--gut .gc-vent-card__pill    { background: rgba(16,185,129,0.14) !important; color: #047857 !important; }
.gc-vent-card--mittel .gc-vent-card__pill { background: rgba(245,158,11,0.20) !important; color: #b45309 !important; }
.gc-vent-card--schwer .gc-vent-card__pill { background: rgba(249,115,22,0.18) !important; color: #c2410c !important; }
.gc-vent-card--extrem .gc-vent-card__pill { background: rgba(220,38,38,0.18) !important; color: #b91c1c !important; }
.gc-vent-card__warning {
margin-top: 4px !important;
padding: 6px 8px !important;
background: rgba(220, 38, 38, 0.08) !important;
border-left: 3px solid #dc2626 !important;
border-radius: 4px !important;
font-size: 0.78rem !important;
color: #7f1d1d !important;
line-height: 1.4 !important;
}
.gc-vent-card__warning strong { color: #450a0a !important; }
.gc-vent__footer {
margin-top: 10px !important;
padding-top: 8px !important;
border-top: 1px solid rgba(15,23,42,0.06) !important;
font-size: 0.72rem !important;
color: #64748b !important;
text-align: right !important;
} .gc-vent__richtung-toggle {
display: flex;
gap: 8px;
margin: 12px 0 16px;
padding: 4px;
background: #f3f4f6;
border-radius: 10px;
}
.gc-vent__richtung-tab {
flex: 1;
background: transparent;
border: 0;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
font-size: 0.95rem;
color: #6b7280;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
transition: background 0.15s, color 0.15s;
}
.gc-vent__richtung-tab:hover { background: rgba(255,255,255,0.6); color: #374151; }
.gc-vent__richtung-tab.is-active {
background: #ffffff;
color: #4583cf;
font-weight: 700;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.gc-vent__richtung-icon {
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
}
.gc-vent__richtung-meta {
font-size: 0.75rem;
font-weight: 500;
color: inherit;
opacity: 0.75;
}