/* ==========================================================================
   birdiefy.css — Markengrundlage (Etappe 20)

   Neu in Etappe 20. Diese Datei wird als LETZTES Stylesheet geladen und legt
   sich ueber bootstrap.css, all.css und custom.css. Sie aendert die Struktur
   des Layouts von 2017 nicht, sondern nur Farben, Abstaende, Radien,
   Typografie-Details und Fokus-Zustaende.

   Die Farbwerte stammen nicht aus einer Neuerfindung, sondern aus dem
   Original-Markenmaterial von Birdiefy (Scorecard-Druckdaten und
   Newsletter-Grafik, Stand 2015, aus dem Google Drive des Betreibers).
   Ausgelesen wurden:

     Gruen (Flaechen, Marke)   #97bd4c
     Gruen hell (Raster)       #d3e3b4
     Anthrazit (Kopf/Fuss)     #1e2223
     Grau (Beschriftungsfeld)  #45484f
     Weiss                     #ffffff

   Die 2017er Oberflaeche benutzte davon nichts: Seitenleiste #212328,
   Links #337ab7 (Bootstrap-Blau), Kacheln #e7bc67 / #8372b2 / #e87c67
   (Gelb, Lila, Rot aus der gekauften HTML-Vorlage). Diese Vorlagenfarben
   werden hier auf die echte Marke zurueckgefuehrt.
   ========================================================================== */

:root {
    /* Marke */
    --bf-gruen: #97bd4c;
    --bf-gruen-dunkel: #79a034;
    --bf-gruen-tief: #5f8127;
    --bf-gruen-hell: #d3e3b4;
    --bf-gruen-blass: #eef4e2;

    --bf-anthrazit: #1e2223;
    --bf-anthrazit-hell: #2a2f30;
    --bf-grau: #45484f;

    /* Oberflaechen */
    --bf-flaeche: #ffffff;
    --bf-flaeche-2: #f6f7f4;
    --bf-flaeche-3: #eef0ec;
    --bf-linie: #dfe2dc;
    --bf-linie-stark: #c6cbc2;

    /* Text */
    --bf-text: #1e2223;
    --bf-text-leise: #6b7078;

    /* Signale (nur fuer echte Zustaende, nicht als Dekor) */
    --bf-gut: #3f8f4e;
    --bf-warnung: #b8801f;
    --bf-schlecht: #b4452f;

    /* Form */
    --bf-radius: 6px;
    --bf-radius-gross: 10px;
    --bf-schatten: 0 1px 2px rgba(30, 34, 35, .06), 0 4px 16px rgba(30, 34, 35, .05);
    --bf-schatten-stark: 0 2px 6px rgba(30, 34, 35, .10), 0 12px 32px rgba(30, 34, 35, .08);

    --bf-schrift: "helvetica_neue_roman", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bf-zahlen: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

body {
    font-family: var(--bf-schrift);
    color: var(--bf-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
    font-family: var(--bf-schrift);
    color: var(--bf-text);
    letter-spacing: -.01em;
}

a {
    color: var(--bf-gruen-tief);
}

a:hover,
a:focus {
    color: var(--bf-gruen-dunkel);
}

/* Sichtbarer Fokus. Die Vorlage von 2017 hat outline:none gesetzt, damit war
   die Anwendung per Tastatur nicht bedienbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--bf-gruen-dunkel);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Seitenleiste
   -------------------------------------------------------------------------- */

.aside {
    background: var(--bf-anthrazit);
}

.aside .logo-box {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#nav .list li.active,
#nav .list li.active a {
    background: rgba(151, 189, 76, .16);
}

#nav .list li.active {
    box-shadow: inset 3px 0 0 var(--bf-gruen);
}

#nav .list a:hover {
    background: rgba(255, 255, 255, .05);
}

/* --------------------------------------------------------------------------
   Kennzahlen-Kacheln im Kopfbereich
   -------------------------------------------------------------------------- */

/* Die Vorlage von 2017 rechnete fest mit drei Kacheln (je 33 Prozent Breite)
   und faerbte den Streifen dahinter lachsrot ein. Bei vier Kacheln rutschte
   die vierte in eine zweite Zeile und der Rest des Streifens blieb sichtbar.
   Hier uebernimmt ein Raster die Aufteilung, egal wie viele Kacheln kommen. */
.info-row {
    background: var(--bf-anthrazit);
}

.info-holder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Der Umbruch-Helfer der alten Vorlage wuerde im Raster eine leere Spalte
   belegen. */
.info-holder:after {
    display: none;
}

.info-box,
.info-box.box2,
.info-box.box3,
.info-box.box4 {
    float: none;
    width: auto;
    background: var(--bf-anthrazit);
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.info-box:last-child {
    border-right: 0;
}

.info-box.box2 {
    background: var(--bf-grau);
}

.info-box.box3 {
    background: var(--bf-gruen-dunkel);
}

.info-box.box4 {
    background: var(--bf-gruen-tief);
}

.info-box strong,
.info-box span {
    color: #fff;
}

.info-box span {
    color: rgba(255, 255, 255, .72);
}

/* Etappe 20: Kacheln ohne Symbolgrafik brauchen den linken Einzug der
   Vorlage nicht. */
.info-box.ohne-ico {
    padding-left: 25px;
}

.info-box .kachel-zusatz {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   Schaltflaechen
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--bf-radius);
    font-family: var(--bf-schrift);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary,
.btn-primary:link {
    background: var(--bf-gruen-dunkel);
    border-color: var(--bf-gruen-dunkel);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: var(--bf-gruen-tief);
    border-color: var(--bf-gruen-tief);
    color: #fff;
}

.btn-default {
    background: var(--bf-flaeche);
    border-color: var(--bf-linie-stark);
    color: var(--bf-text);
}

.btn-default:hover,
.btn-default:focus {
    background: var(--bf-flaeche-3);
    border-color: var(--bf-grau);
    color: var(--bf-text);
}

.btn-info {
    background: var(--bf-grau);
    border-color: var(--bf-grau);
}

.btn-info:hover,
.btn-info:focus {
    background: var(--bf-anthrazit);
    border-color: var(--bf-anthrazit);
}

/* --------------------------------------------------------------------------
   Karten, Tabellen, Hinweise
   -------------------------------------------------------------------------- */

.inner-content-box {
    border-radius: var(--bf-radius-gross);
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--bf-linie-stark);
    color: var(--bf-text-leise);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: normal;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--bf-linie);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background: var(--bf-gruen-blass);
}

.bs-callout-birdiefy {
    border-left-color: var(--bf-gruen) !important;
    background: var(--bf-gruen-blass);
    border-radius: var(--bf-radius);
}

.bs-callout-birdiefy h4 {
    color: var(--bf-gruen-tief);
}

.label-birdiefy,
.badge-birdiefy {
    background: var(--bf-gruen-dunkel);
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.form-control {
    border-radius: var(--bf-radius);
    border-color: var(--bf-linie-stark);
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--bf-gruen-dunkel);
    box-shadow: 0 0 0 3px rgba(151, 189, 76, .22);
}

/* --------------------------------------------------------------------------
   Zahlen
   Kennzahlen werden mit Tabellenziffern gesetzt, damit Spalten nicht
   springen, wenn sich Werte aendern.
   -------------------------------------------------------------------------- */

.zahl,
.info-box strong,
.kennzahl-wert,
.table .text-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Kennzahlen-Raster (Dashboard und Statistik)
   -------------------------------------------------------------------------- */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.kennzahl {
    background: var(--bf-flaeche);
    border: 1px solid var(--bf-linie);
    border-radius: var(--bf-radius-gross);
    padding: 16px 18px;
    box-shadow: var(--bf-schatten);
}

.kennzahl-titel {
    display: block;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bf-text-leise);
    margin-bottom: 6px;
}

.kennzahl-wert {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    color: var(--bf-text);
}

.kennzahl-wert.ist-gut { color: var(--bf-gut); }
.kennzahl-wert.ist-schlecht { color: var(--bf-schlecht); }
.kennzahl-wert.ist-leer { color: var(--bf-text-leise); }

.kennzahl-fuss {
    display: block;
    font-size: 12px;
    color: var(--bf-text-leise);
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Diagramme
   -------------------------------------------------------------------------- */

.diagramm-karte {
    background: var(--bf-flaeche);
    border: 1px solid var(--bf-linie);
    border-radius: var(--bf-radius-gross);
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: var(--bf-schatten);
}

.diagramm-karte h4 {
    margin: 0 0 4px;
}

.diagramm-karte .diagramm-hinweis {
    font-size: 12px;
    color: var(--bf-text-leise);
    margin: 0 0 14px;
}

.diagramm-flaeche {
    position: relative;
    width: 100%;
    height: 300px;
}

.diagramm-flaeche.hoch {
    height: 380px;
}

.diagramm-leer {
    color: var(--bf-text-leise);
    font-size: 14px;
    padding: 32px 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Scorekarte (Runden-Detailseite)
   -------------------------------------------------------------------------- */

.scorekarte-rollen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bf-linie);
    border-radius: var(--bf-radius-gross);
    background: var(--bf-flaeche);
}

.scorekarte {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 640px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.scorekarte th,
.scorekarte td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--bf-linie);
    white-space: nowrap;
}

.scorekarte thead th {
    background: var(--bf-anthrazit);
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 2;
}

.scorekarte th.spalte-loch,
.scorekarte td.spalte-loch {
    background: var(--bf-gruen);
    color: #fff;
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-variant-numeric: normal;
}

.scorekarte thead th.spalte-loch {
    background: var(--bf-gruen-tief);
    z-index: 3;
}

.scorekarte tfoot td {
    background: var(--bf-flaeche-3);
    border-top: 2px solid var(--bf-linie-stark);
    border-bottom: 0;
}

/* Ergebnis gegen Par: die Kreise/Kaesten der klassischen Scorekarte. */
.ergebnis {
    display: inline-block;
    min-width: 26px;
    line-height: 22px;
    padding: 0 4px;
}

.ergebnis-eagle {
    border: 2px double var(--bf-gruen-tief);
    border-radius: 50%;
    color: var(--bf-gruen-tief);
}

.ergebnis-birdie {
    border: 2px solid var(--bf-gruen-tief);
    border-radius: 50%;
    color: var(--bf-gruen-tief);
}

.ergebnis-par {
    color: var(--bf-text);
}

.ergebnis-bogey {
    border: 2px solid var(--bf-linie-stark);
    color: var(--bf-text);
}

.ergebnis-doppelbogey {
    border: 2px solid var(--bf-schlecht);
    color: var(--bf-schlecht);
}

/* --------------------------------------------------------------------------
   Schlagfolge eines Lochs
   -------------------------------------------------------------------------- */

.schlagfolge {
    list-style: none;
    margin: 0;
    padding: 0;
}

.schlagfolge li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--bf-linie);
}

.schlagfolge li:last-child {
    border-bottom: 0;
}

.schlagfolge .schlag-nr {
    flex: 0 0 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: var(--bf-flaeche-3);
    color: var(--bf-text-leise);
    font-size: 12px;
}

.schlagfolge .schlag-lage {
    flex: 0 0 auto;
    background: var(--bf-gruen-blass);
    color: var(--bf-gruen-tief);
    border-radius: var(--bf-radius);
    padding: 2px 8px;
    font-size: 12px;
}

.schlagfolge .schlag-distanz {
    color: var(--bf-text-leise);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Schlagerfassung fuer das Handy
   Grosse Flaechen statt kleiner Auswahlfelder.
   -------------------------------------------------------------------------- */

.erfassung {
    max-width: 640px;
}

.erfassung-abschnitt {
    margin-bottom: 22px;
}

.erfassung-abschnitt > legend,
.erfassung-titel {
    display: block;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bf-text-leise);
    border: 0;
    margin-bottom: 10px;
    padding: 0;
}

.lagen-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
}

.lagen-knopf {
    display: block;
    margin: 0;
    padding: 12px 6px;
    min-height: 52px;
    text-align: center;
    border: 1px solid var(--bf-linie-stark);
    border-radius: var(--bf-radius);
    background: var(--bf-flaeche);
    color: var(--bf-text);
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .12s ease, border-color .12s ease;
}

.lagen-knopf:hover {
    border-color: var(--bf-gruen-dunkel);
}

.lagen-knopf.ist-gewaehlt {
    background: var(--bf-gruen-dunkel);
    border-color: var(--bf-gruen-tief);
    color: #fff;
}

.lagen-knopf:focus-visible {
    outline: 2px solid var(--bf-gruen-dunkel);
    outline-offset: 2px;
}

.distanz-feld {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.distanz-feld input {
    flex: 1 1 auto;
    height: 64px;
    font-size: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--bf-linie-stark);
    border-radius: var(--bf-radius);
    padding: 0 12px;
    width: 100%;
}

.distanz-feld input:focus {
    border-color: var(--bf-gruen-dunkel);
    box-shadow: 0 0 0 3px rgba(151, 189, 76, .22);
    outline: none;
}

.distanz-feld .distanz-schritt {
    flex: 0 0 64px;
    height: 64px;
    font-size: 24px;
    border: 1px solid var(--bf-linie-stark);
    border-radius: var(--bf-radius);
    background: var(--bf-flaeche-2);
    color: var(--bf-text);
}

.distanz-feld .distanz-schritt:active {
    background: var(--bf-flaeche-3);
}

.distanz-schnellwahl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.distanz-schnellwahl button {
    border: 1px solid var(--bf-linie-stark);
    background: var(--bf-flaeche);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.distanz-schnellwahl button:active {
    background: var(--bf-gruen-blass);
    border-color: var(--bf-gruen-dunkel);
}

.erfassung-absenden {
    width: 100%;
    height: 60px;
    font-size: 18px;
}

/* Kopfzeile mit Lochwechsel */
.erfassung-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bf-linie);
}

.loch-blaettern {
    flex: 0 0 48px;
    height: 48px;
    font-size: 26px;
    line-height: 1;
    border: 1px solid var(--bf-linie-stark);
    border-radius: var(--bf-radius);
    background: var(--bf-flaeche);
    color: var(--bf-text);
}

.loch-blaettern:active {
    background: var(--bf-gruen-blass);
}

.loch-anzeige {
    flex: 1 1 auto;
    text-align: center;
}

.loch-nummer {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--bf-anthrazit);
}

.loch-info {
    display: block;
    font-size: 13px;
    color: var(--bf-text-leise);
}

/* Lochleiste */
.loch-leiste {
    list-style: none;
    margin: 12px 0 18px;
    padding: 0 0 4px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.loch-leiste li {
    flex: 0 0 auto;
}

.loch-marke {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--bf-linie-stark);
    background: var(--bf-flaeche);
    color: var(--bf-text-leise);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.loch-marke.ist-erfasst {
    background: var(--bf-gruen-blass);
    border-color: var(--bf-gruen-dunkel);
    color: var(--bf-anthrazit);
}

.loch-marke.ist-aktiv {
    background: var(--bf-anthrazit);
    border-color: var(--bf-anthrazit);
    color: #fff;
    font-weight: 700;
}

/* Schlagzeilen */
.erfassung-schlag {
    padding: 14px 0;
    border-bottom: 1px solid var(--bf-linie);
}

.erfassung-schlag:last-child {
    border-bottom: 0;
}

.erfassung-schlag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.erfassung-schlag-kopf .schlag-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--bf-anthrazit);
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.erfassung-schlag-weg {
    border: 0;
    background: none;
    color: var(--bf-text-leise);
    font-size: 13px;
    text-decoration: underline;
    padding: 6px 2px;
}

.erfassung-schlag-weg:hover {
    color: var(--bf-schlecht);
}

.schlag-leer {
    color: var(--bf-text-leise);
    padding: 18px 0;
}

.distanz-feld label {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bf-text-leise);
    font-weight: normal;
}

.distanz-feld .distanz-einheit {
    align-self: center;
    font-size: 16px;
    color: var(--bf-text-leise);
}

.erfassung-aktionen {
    display: flex;
    gap: 10px;
    margin: 18px 0 8px;
}

.erfassung-aktionen .btn {
    flex: 1 1 auto;
    height: 52px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.erfassung-hinweis {
    min-height: 22px;
    font-size: 14px;
    color: var(--bf-text-leise);
}

.erfassung-hinweis.ist-gut { color: var(--bf-gut); }
.erfassung-hinweis.ist-fehler { color: var(--bf-schlecht); }
.erfassung-hinweis.ist-warnung { color: var(--bf-grau); }

.erfassung-stand {
    font-size: 14px;
    color: var(--bf-text-leise);
    border-top: 1px solid var(--bf-linie);
    padding-top: 12px;
}

@media (max-width: 480px) {
    .lagen-wahl {
        grid-template-columns: repeat(4, 1fr);
    }

    .erfassung-aktionen {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Handy
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .kennzahlen {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .kennzahl-wert {
        font-size: 24px;
    }

    .diagramm-flaeche {
        height: 260px;
    }

    .diagramm-flaeche.hoch {
        height: 320px;
    }
}

/* --------------------------------------------------------------------------
   Drucken
   -------------------------------------------------------------------------- */

@media print {
    .aside,
    .menue-schalter,
    .menue-schatten,
    .btns-box,
    .nav-menu {
        display: none !important;
    }

    #wrapper .w1 {
        padding-left: 0 !important;
    }

    .diagramm-karte,
    .kennzahl {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   Handy: Platz fuer die Menue-Schaltflaeche
   Die Schaltflaeche liegt fest oben links (44 px). Alles, was in der ersten
   Zeile beginnt, braucht daher einen Einzug.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
    body.menue-mobil .info-holder {
        grid-template-columns: 1fr;
    }

    body.menue-mobil .info-box:first-child,
    body.menue-mobil .head-box {
        padding-left: 66px;
    }

    body.menue-mobil .info-box {
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    body.menue-mobil .info-box strong {
        font-size: 26px;
        line-height: 32px;
    }

    /* Die Erfassung fuellt auf dem Handy die volle Breite. */
    .loch-anzeige {
        min-width: 0;
    }

    .loch-nummer {
        font-size: 20px;
    }

    .loch-info {
        font-size: 12px;
    }

    .lagen-wahl {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .lagen-knopf {
        min-height: 48px;
        padding: 10px 2px;
        font-size: 16px;
    }

    .distanz-feld input {
        height: 56px;
        font-size: 24px;
    }
}

/* Breite Tabellen duerfen auf schmalen Bildschirmen waagerecht rollen. */
.tabelle-rollen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabelle-rollen > .table {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Etappe 20: verbliebene Bootstrap-Blautoene auf die Marke umstellen
   Die Regeln aus custom.css bleiben unveraendert, sie werden hier nur
   ueberschrieben.
   -------------------------------------------------------------------------- */

.inner-content-box table a:not(.btn) {
    color: var(--bf-gruen-tief);
}

.inner-content-box table a:not(.btn):hover,
.inner-content-box table a:not(.btn):focus {
    color: var(--bf-gruen-dunkel);
}

.profile-hero-initial {
    background: var(--bf-gruen-dunkel);
}

.kpi-value {
    color: var(--bf-anthrazit);
}

.shotlength-bar {
    background: var(--bf-gruen);
}

.progress-bar-primary,
.progress-bar.progress-bar-primary {
    background-color: var(--bf-gruen-dunkel);
}

.distribution-fill {
    background: var(--bf-gruen);
}

.distribution-track {
    background: var(--bf-flaeche-2);
}