.gc-verkehr-de {
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-de--compact { padding: 14px; margin: 12px 0; }
.gc-verkehr-de__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.gc-verkehr-de__title-wrap { flex: 1 1 auto; min-width: 0; }
.gc-verkehr-de__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-de__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-de__live-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #fff;
animation: gc-verkehr-de-pulse 1.6s ease-in-out infinite;
}
@keyframes gc-verkehr-de-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.gc-verkehr-de__subline {
margin: 4px 0 0;
font-size: 0.9rem;
color: #6b7280;
line-height: 1.4;
}
.gc-verkehr-de__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-de__refresh:hover { background: #e5e7eb; border-color: #d1d5db; }
.gc-verkehr-de--compact .gc-verkehr-de__refresh-label { display: none; }
.gc-verkehr-de__loading {
display: flex;
align-items: center;
gap: 10px;
color: #6b7280;
font-size: 0.9rem;
padding: 12px 0;
}
.gc-verkehr-de__spinner {
width: 16px; height: 16px;
border: 2px solid #e5e7eb;
border-top-color: #4583cf;
border-radius: 50%;
animation: gc-verkehr-de-spin 0.8s linear infinite;
}
@keyframes gc-verkehr-de-spin { to { transform: rotate(360deg); } }
.gc-verkehr-de__error {
background: #fee2e2;
color: #991b1b;
padding: 12px;
border-radius: 8px;
font-size: 0.9rem;
}
.gc-verkehr-de__score-bar {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
margin-bottom: 14px;
}
.gc-verkehr-de__score-meter {
height: 12px;
background: #f3f4f6;
border-radius: 999px;
overflow: hidden;
position: relative;
}
.gc-verkehr-de__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-de__score-label {
font-weight: 700;
font-size: 1.1rem;
}
.gc-verkehr-de__score-num { color: #0f172a; font-size: 1.5rem; }
.gc-verkehr-de__score-of  { color: #9ca3af; font-size: 0.85rem; font-weight: 500; }
.gc-verkehr-de__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-de__status[data-status="gut"]    { background: #d1fae5; color: #065f46; }
.gc-verkehr-de__status[data-status="mittel"] { background: #fef3c7; color: #92400e; }
.gc-verkehr-de__status[data-status="schwer"] { background: #fed7aa; color: #9a3412; }
.gc-verkehr-de__status[data-status="extrem"] { background: #fecaca; color: #991b1b; }
.gc-verkehr-de__empfehlung {
margin: 0 0 16px;
font-size: 0.95rem;
line-height: 1.5;
color: #374151;
}
.gc-verkehr-de__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-de__stat {
background: #f9fafb;
padding: 10px 12px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.gc-verkehr-de__stat-label {
font-size: 0.75rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gc-verkehr-de__stat-value {
font-weight: 700;
font-size: 1.15rem;
color: #0f172a;
}
.gc-verkehr-de__routes {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.gc-verkehr-de__route-chip {
font-size: 0.78rem;
background: #eff6ff;
color: #1e40af;
padding: 3px 9px;
border-radius: 999px;
font-weight: 500;
}
.gc-verkehr-de__foot {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.gc-verkehr-de__sources {
font-size: 0.78rem;
color: #6b7280;
margin: 0 0 6px;
line-height: 1.5;
}
.gc-verkehr-de__sources a { color: #4583cf; text-decoration: none; }
.gc-verkehr-de__sources a:hover { text-decoration: underline; }
.gc-verkehr-de__disclaimer {
font-size: 0.78rem;
color: #9ca3af;
margin: 0;
line-height: 1.45;
}
@media (max-width: 480px) {
.gc-verkehr-de { padding: 14px; }
.gc-verkehr-de__headline { font-size: 1.15rem; }
.gc-verkehr-de__score-num { font-size: 1.3rem; }
}