.hda-logotext {font-size:28px; font-weight: 300; line-height: 1.2;}
.hda-normal {font-weight: normal; }
.hda-logo {width:81px; height:81px; background-size:contain; background-image: url("../media/logo_hydrodaten-api.svg"); }
.hda-color-green {color: #8BC34A;}
.hda-sup {vertical-align: super; font-size: smaller; }
.hda-width100 {display: inline-block; width:100px;}
.hda-width150 {display: inline-block; width:150px;}
.hda-width200 {display: inline-block; width:200px;}
.hda-width250 {display: inline-block; width:250px;}
.hda-width400 {display: inline-block; width:400px;}
.hda-width300 {display: inline-block; width:300px;}
.hda-noborder {border: none;}
.hda-right {text-align:right;}

/* Responsive Design */
/* large = default */
.topnav .w3-bar a.hda-active {background-color:#8BC34A; color:#000;}

/* medium und small */
@media (max-width:992px) {
    .topnav .w3-bar a.hda-active {background-color:#8BC34A; color:#FFF;}
}

/* Anforderungslevel Badges der API */
.hda-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
    vertical-align: middle;
}

.hda-badge-mandatory {
    background-color: #d73027;
    color: white;
}

.hda-badge-recommended {
    background-color: #fc8d59;
    color: white;
}

.hda-badge-optional {
    background-color: #91bfdb;
    color: #333;
}

.hda-badge-basic {
    background-color: #4CAF50;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.hda-badge-extended {
    background-color: #2196F3;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

/* Karten-Reihen mit gleicher Höhe (BASIS / ERWEITERT Vergleich) */
.hda-cards-equal { display: flex; flex-wrap: wrap; }
.hda-cards-equal > .w3-col { display: flex; }
.hda-cards-equal > .w3-col > .w3-card-2 { display: flex; flex-direction: column; width: 100%; }
.hda-cards-equal > .w3-col > .w3-card-2 > .w3-container { flex: 1; }