.gc-dach,
.gc-dach *,
.gc-dach *::before,
.gc-dach *::after {
box-sizing: border-box;
}
.gc-dach {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 1.5em 0 !important;
padding: 1.5em !important;
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
overflow: visible;
position: relative;
float: none !important;
clear: both !important;
}
.gc-dach__header { margin: 0 0 1.2em; }
.gc-dach__title { font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.3em; color: #185FA5; font-weight: 700; }
.gc-dach__subtitle { font-size: 0.95rem; line-height: 1.5; color: #5F5E5A; margin: 0; } .gc-dach__tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
margin: 0 0 1em;
width: 100%;
}
@media (max-width: 480px) {
.gc-dach__tabs { grid-template-columns: 1fr; }
}
.gc-dach__tab { appearance: none;
-webkit-appearance: none;
display: block;
width: 100%;
margin: 0;
padding: 0.6em 1em;
border: 1px solid #d4d4d4;
background: #f5f5f5;
border-radius: 10px;
cursor: pointer;
font-size: 1rem;
font-family: inherit;
font-weight: 600;
color: #555;
line-height: 1.3;
text-align: center;
transition: all 0.2s;
}
.gc-dach__tab:hover { background: #ebebeb; }
.gc-dach__tab.is-active { background: #185FA5; color: #fff; border-color: #185FA5; }
.gc-dach__regions {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.7em;
margin: 0 0 1em;
width: 100%;
}
.gc-dach__loading { padding: 1em; color: #888; font-style: italic; grid-column: 1 / -1; }
.gc-dach__region-btn {
appearance: none;
-webkit-appearance: none;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
margin: 0;
padding: 0.85em 1em;
border: 1px solid #d4d4d4;
background: #fafafa;
border-radius: 10px;
cursor: pointer;
font-size: 0.95rem;
font-family: inherit;
text-align: left;
transition: all 0.2s;
}
.gc-dach__region-btn:hover { border-color: #185FA5; background: #f0f6fc; }
.gc-dach__region-btn.is-selected { border-color: #185FA5; background: #e8f0fa; box-shadow: 0 2px 6px rgba(24,95,165,0.15); }
.gc-dach__region-name { font-weight: 600; color: #2a2a2a; line-height: 1.3; }
.gc-dach__region-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
padding: 2px 7px;
border-radius: 99px;
font-weight: 600;
align-self: flex-start;
line-height: 1.4;
}
.gc-dach__region-status--gut { background: rgba(16,185,129,0.15); color: #047857; }
.gc-dach__region-status--mittel { background: rgba(245,158,11,0.15); color: #b45309; }
.gc-dach__region-status--schwer { background: rgba(249,115,22,0.18); color: #c2410c; }
.gc-dach__region-status--extrem { background: rgba(220,38,38,0.18); color: #991b1b; }
.gc-dach__detail {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.3em;
margin: 1em 0 0;
width: 100%;
}
.gc-dach__detail h3 { margin: 0 0 0.6em; color: #185FA5; font-size: 1.15rem; line-height: 1.3; }
.gc-dach__detail p { margin: 0.5em 0; line-height: 1.5; }
.gc-dach__detail-tipp {
background: #fff8e6;
border-left: 3px solid #f59e0b;
padding: 0.7em 1em;
margin: 0.8em 0;
border-radius: 0 8px 8px 0;
font-size: 0.95rem;
line-height: 1.5;
}
.gc-dach__detail-routes {
display: grid;
gap: 0.7em;
margin: 0.7em 0;
width: 100%;
}
@media (min-width: 540px) {
.gc-dach__detail-routes { grid-template-columns: 1fr 1fr; }
}
.gc-dach__route-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.9em 1em;
}
.gc-dach__route-card--primary { border-color: #185FA5; }
.gc-dach__route-label { font-size: 0.78rem; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: 0.5px; }
.gc-dach__route-name { font-size: 1.05rem; font-weight: 600; margin: 4px 0; line-height: 1.3; }
.gc-dach__route-score { font-size: 1.4rem; font-weight: 700; color: #185FA5; line-height: 1.2; }
.gc-dach__route-meta { font-size: 0.85rem; color: #5F5E5A; margin-top: 4px; line-height: 1.4; }
.gc-dach__detail-eta {
background: #185FA5;
color: #fff;
padding: 0.8em 1em;
border-radius: 10px;
margin-top: 0.8em;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.gc-dach__detail-eta-label { font-size: 0.85rem; opacity: 0.9; }
.gc-dach__detail-eta-time { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.gc-dach__footer {
margin: 1em 0 0;
padding: 0.8em 0 0;
border-top: 1px solid #ececec;
font-size: 0.78rem;
color: #888;
line-height: 1.5;
} .gc-dach__detail-wetter {
margin: 0.6em 0;
padding: 0.6em 0.9em;
border-radius: 8px;
font-size: 0.9rem;
line-height: 1.4;
display: flex;
align-items: center;
gap: 8px;
border-left: 3px solid #cbd5e1;
background: #f8fafc;
}
.gc-dach__detail-wetter--gut    { border-left-color: #10b981; background: rgba(16,185,129,0.08); }
.gc-dach__detail-wetter--mittel { border-left-color: #f59e0b; background: rgba(245,158,11,0.08); }
.gc-dach__detail-wetter--schwer { border-left-color: #f97316; background: rgba(249,115,22,0.08); }
.gc-dach__detail-wetter--extrem { border-left-color: #dc2626; background: rgba(220,38,38,0.10); color: #7f1d1d; font-weight: 600; }
.gc-dach__wetter-icon { font-size: 1.2rem; line-height: 1; }
.gc-dach__premium-teaser {
margin: 1.2em 0 0;
padding: 1em 1.2em;
background: linear-gradient(135deg, rgba(24,95,165,0.04) 0%, rgba(236,72,153,0.04) 100%);
border: 1px solid rgba(24,95,165,0.2);
border-radius: 12px;
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
}
.gc-dach__premium-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: linear-gradient(135deg, #185FA5 0%, #ec4899 100%);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 99px;
}
.gc-dach__premium-pill::before { content: '✨ '; margin-right: 2px; }
.gc-dach__premium-text { display: flex; flex-direction: column; gap: 4px; }
.gc-dach__premium-heading { color: #185FA5; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.gc-dach__premium-desc { font-size: 0.88rem; color: #475569; line-height: 1.5; }
@media (max-width: 480px) {
.gc-dach__premium-teaser { flex-direction: column; }
}