/* Flugplan-Baustein. Bewusst sparsam gehalten, damit er sich in das Design
   der phpwcms-Seite einfuegt statt es zu ueberschreiben. */

:root {
    --gcf-brand:      #cc6601;
    --gcf-brand-dark: #a85101;
}

/* Ueberschriften: die Seitenvorlage setzt h2 offenbar groesser als h1,
   deshalb hier eine eigene, klar untergeordnete Groesse. */
.gcf-heading {
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 1.8em 0 .6em;
}

.gcf-to { color: var(--gcf-brand); }

.gcf-intro { margin-bottom: 1.2em; }

.gcf-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3em 1.2em;
    margin: 0 0 1.8em;
}
.gcf-facts dt { font-weight: 600; }
.gcf-facts dd { margin: 0; }

.gcf-table { width: 100%; border-collapse: collapse; margin-bottom: 2em; }
.gcf-table caption { text-align: left; font-size: .85em; opacity: .7; padding-bottom: .5em; }
.gcf-table th,
.gcf-table td { padding: .5em .6em; text-align: left; border-bottom: 1px solid rgba(0,0,0,.12); }
.gcf-table th { font-size: .78em; text-transform: uppercase; letter-spacing: .08em; }
.gcf-table time { font-variant-numeric: tabular-nums; }

/* Zeit am Zielort der jeweiligen Richtung */
.gcf-key { font-weight: 700; }

/* Verkehrstage */
.gcf-days { display: inline-flex; gap: .2em; }
.gcf-day {
    font-size: .82em;
    line-height: 1;
    padding: .3em .38em;
    border-radius: 3px;
    opacity: .3;
}
.gcf-day--on {
    opacity: 1;
    font-weight: 600;
    background: var(--gcf-brand);
    color: #fff;
}
.gcf-days--all {
    font-weight: 700;
    color: var(--gcf-brand);
}

.gcf-note { font-size: .82em; opacity: .75; }
.gcf-empty, .gcf-error { font-style: italic; opacity: .8; }

@media (max-width: 700px) {
    .gcf-table { display: block; overflow-x: auto; }
}

/* Streckenuebersicht */
.gcf-table--routes td:nth-child(2) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gcf-table--routes .gcf-airlines {
    font-size: .88em;
    opacity: .8;
}
.gcf-table--routes td:first-child { padding-block: .35em; }

/* Flughafen als Schaltflaeche */
.gcf-table--routes a {
    display: inline-block;
    padding: .4em .7em;
    background: var(--gcf-brand);
    color: #fff;
    text-decoration: none;
    border: 0;
    border-radius: 3px;
    white-space: nowrap;
    transition: background-color .15s ease;
}
.gcf-table--routes a abbr {
    text-decoration: none;
    border: 0;
    opacity: .85;
    margin-left: .3em;
}
.gcf-table--routes a:hover,
.gcf-table--routes a:focus-visible {
    background: var(--gcf-brand-dark);
    color: #fff;
}
.gcf-table--routes a:focus-visible {
    outline: 2px solid var(--gcf-brand);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .gcf-table--routes a { transition: none; }
}