.gc-verkehr-at {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
margin: 24px 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
color: #1f2937;
}
.gc-verkehr-at--compact { padding: 14px; margin: 12px 0; }
.gc-verkehr-at__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.gc-verkehr-at__title-wrap { flex: 1 1 auto; min-width: 0; }
.gc-verkehr-at__headline {
font-size: 1.35rem;
font-weight: 700;
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: #0f172a;
}
.gc-verkehr-at__live-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ec4899;
color: #fff;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.gc-verkehr-at__live-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #fff;
animation: gc-verkehr-at-pulse 1.6s ease-in-out infinite;
}
@keyframes gc-verkehr-at-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.gc-verkehr-at__subline {
margin: 4px 0 0;
font-size: 0.9rem;
color: #6b7280;
line-height: 1.4;
}
.gc-verkehr-at__refresh {
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: #374151;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 500;
transition: background 0.15s, border-color 0.15s;
}
.gc-verkehr-at__refresh:hover { background: #e5e7eb; border-color: #d1d5db; }
.gc-verkehr-at--compact .gc-verkehr-at__refresh-label { display: none; }
.gc-verkehr-at__loading {
display: flex;
align-items: center;
gap: 10px;
color: #6b7280;
font-size: 0.9rem;
padding: 12px 0;
}
.gc-verkehr-at__spinner {
width: 16px; height: 16px;
border: 2px solid #e5e7eb;
border-top-color: #4583cf;
border-radius: 50%;
animation: gc-verkehr-at-spin 0.8s linear infinite;
}
@keyframes gc-verkehr-at-spin { to { transform: rotate(360deg); } }
.gc-verkehr-at__error {
background: #fee2e2;
color: #991b1b;
padding: 12px;
border-radius: 8px;
font-size: 0.9rem;
}
.gc-verkehr-at__score-bar {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
margin-bottom: 14px;
}
.gc-verkehr-at__score-meter {
height: 12px;
background: #f3f4f6;
border-radius: 999px;
overflow: hidden;
position: relative;
}
.gc-verkehr-at__score-fill {
height: 100%;
background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #ef4444 100%);
border-radius: 999px;
transition: width 0.6s ease-out;
}
.gc-verkehr-at__score-label {
font-weight: 700;
font-size: 1.1rem;
}
.gc-verkehr-at__score-num { color: #0f172a; font-size: 1.5rem; }
.gc-verkehr-at__score-of  { color: #9ca3af; font-size: 0.85rem; font-weight: 500; }
.gc-verkehr-at__status {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 12px;
background: #f3f4f6;
color: #374151;
}
.gc-verkehr-at__status[data-status="gut"]    { background: #d1fae5; color: #065f46; }
.gc-verkehr-at__status[data-status="mittel"] { background: #fef3c7; color: #92400e; }
.gc-verkehr-at__status[data-status="schwer"] { background: #fed7aa; color: #9a3412; }
.gc-verkehr-at__status[data-status="extrem"] { background: #fecaca; color: #991b1b; }
.gc-verkehr-at__empfehlung {
margin: 0 0 16px;
font-size: 0.95rem;
line-height: 1.5;
color: #374151;
}
.gc-verkehr-at__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.gc-verkehr-at__stat {
background: #f9fafb;
padding: 10px 12px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.gc-verkehr-at__stat-label {
font-size: 0.75rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gc-verkehr-at__stat-value {
font-weight: 700;
font-size: 1.15rem;
color: #0f172a;
}
.gc-verkehr-at__routes {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.gc-verkehr-at__route-chip {
font-size: 0.78rem;
background: #eff6ff;
color: #1e40af;
padding: 3px 9px;
border-radius: 999px;
font-weight: 500;
}
.gc-verkehr-at__foot {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.gc-verkehr-at__sources {
font-size: 0.78rem;
color: #6b7280;
margin: 0 0 6px;
line-height: 1.5;
}
.gc-verkehr-at__sources a { color: #4583cf; text-decoration: none; }
.gc-verkehr-at__sources a:hover { text-decoration: underline; }
.gc-verkehr-at__disclaimer {
font-size: 0.78rem;
color: #9ca3af;
margin: 0;
line-height: 1.45;
}
@media (max-width: 480px) {
.gc-verkehr-at { padding: 14px; }
.gc-verkehr-at__headline { font-size: 1.15rem; }
.gc-verkehr-at__score-num { font-size: 1.3rem; }
} .gc-verkehr-at__sub { margin: 1.25rem 0 0 0; }
.gc-verkehr-at__sub-title { font-size: 1rem; font-weight: 600; color: #2c5b94; margin: 0 0 0.6rem 0; }
.gc-verkehr-at__sub-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.gc-verkehr-at__sub-card { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; border-radius: 6px; padding: 0.75rem 0.85rem; }
.gc-verkehr-at__sub-card[data-status="gut"]    { border-left-color: #10b981; }
.gc-verkehr-at__sub-card[data-status="mittel"] { border-left-color: #f59e0b; }
.gc-verkehr-at__sub-card[data-status="schwer"] { border-left-color: #ef4444; }
.gc-verkehr-at__sub-card[data-status="extrem"] { border-left-color: #b91c1c; background: #fef2f2; }
.gc-verkehr-at__sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.gc-verkehr-at__sub-name { font-weight: 600; color: #1f2937; font-size: 0.95rem; }
.gc-verkehr-at__sub-score { font-weight: 700; font-size: 1.15rem; color: #2c5b94; }
.gc-verkehr-at__sub-strecke { font-size: 0.8rem; color: #64748b; margin: 0.15rem 0 0.5rem 0; }
.gc-verkehr-at__sub-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.gc-verkehr-at__sub-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%); border-radius: 3px; transition: width 0.4s ease; }
.gc-verkehr-at__sub-stats { display: flex; gap: 0.75rem; font-size: 0.82rem; color: #475569; }
.gc-verkehr-at__sub-stats strong { color: #1f2937; }
.gc-verkehr-at__sub-schwer { color: #b91c1c; }
.gc-verkehr-at__sub-empf { margin: 0.5rem 0 0 0; font-size: 0.82rem; color: #475569; font-style: italic; }