/* DBk2: ausgetauschtes Logo Breite fixen */
#header .logo-sozialnetz img {max-width:150px;height:auto;}


/* Site Name im Header kleiner auf Mobile */
@media only screen and (max-width: 575px) {

#header .navbar-brand .brand-name .brand-title {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}
/* Untertitel auch etwas kleiner */  
#header .navbar-brand .brand-name .brand-subtitle {
    font-size: 1rem; }  
  
/* und logo kleiner machen */
  #header .navbar-brand img {
  max-width:40px;}
  
/* und in der Breadcrumb-Navi die Spalte mit "Sie sind hier" entfernen: */
  
    .section__breadcrumb .col-12.col-sm-auto {
    display: none;
  }
  
}

/* Bei der Topheader-Meta-Navigation gibt es Platzprobleme wenn da mehr als 2 Links stehen - Font verkleinern und Abständ verringern hilft notdürfig */
@media (max-width: 575px) {
#topheader ul a {
    font-size: 0.9rem;
    font-weight: 400;
    padding-left: 1rem;

}
  
  .topheader-navigation li+li {
    margin-left: 0.5rem;
}
}




/* nummerierte Listen stylen */
#content ol > li::marker {
  font-weight: bold;
  color: var(--bs-primary);
}

/*Mitglieder Liste auf DBK2, testweise*/

.mitglieder .ctype-textmedia .figure {
  display: flex;
  justify-content: center; /* Horizontale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  height: 40px; /* Oder eine andere feste Höhe */
  overflow: hidden; /* Verhindert Überlauf */
}

.mitglieder .ctype-textmedia img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain; /* Sorgt dafür, dass das Bild vollständig sichtbar ist und nicht verzerrt wird */
}

.mitglieder .ctype-textmedia p {
  text-align: center; /* Zentriert den Text */
  margin-top: 0px; /* Fügt etwas Abstand zwischen Bild und Text hinzu */
  line-height:100%;
  font-weight:600;
  font-size:0.9rem;
}
.mitglieder .ctype-textmedia
{border-color: var(--bs-border-color-translucent);

  border: 2px solid var(--accent-color-300);
    border-radius: 1rem;
      box-shadow: 0 0.25rem 1rem -0.5rem rgba(5, 33, 46, 0.12);
  
  padding:1rem 1rem 0.5rem 1rem;
  background-color:white;
  
}


/* Auf der "interner Bereich"-Seite hängt der Anmelde-Text so weit oben, dass er vom Header verschluckt wird. mit der Klasse wird er nach unten verschoben - aber nicht auf der Startseite, da haben wir bereits genug margin */
body:not(.tpl-startpage) .anmeldung {margin-top:5rem;}

/* Spezial-Klassen zur Darstellung von Personen-Cards mit Text-Medien-Element (genutzt in Fachkräfte-Site) */
.person img {border-radius: 50%!important;}
.person .col-12.col-lg-auto { /*wähle die spalte aus*/
    display: flex; /* Aktiviere Flexbox */
    justify-content: center; /* Horizontales Zentrieren */
}
.person .container-vertical.container-medium {max-width:230px!important;}
.bottom-border {border-bottom: 2px solid var(--accent-color-300);padding-bottom:2rem!important;}

/* Auf der Startseite folgt eine Sektion direkt auf ein text-medien-element - hier hat das text-element zu wenig Abstand zur Sektion - das hier soll das fixen */
.ctype-textmedia + section {
  margin-top: 6rem;
}
*/

/* Über der Tabelle auf der Heikpraktiker-Blacklist layout korrekturen */
.heilpraktiker-download {margin-right:unset!important;max-width:420px;margin-left:auto!important;margin-right:0rem!important;}
.heilpraktiker-raster {margin-bottom:0rem!important;}

/* Breite der Spalten-Überschriften in Heiplraktiker Blacklist fixen, so dass es nicht zu blöden Umbrüchen bei den Spalten-Labels kommt:  https://heilpraktiker-blacklist.hmsi.stage.ikanos.de/heilpraktiker-blacklist/ */
.tx-ikanos-hmsi-blacklist .table th:nth-child(3) {
  min-width: 150px; /* Mindestbreite für die 3. Spalte (Geburtstag) */
}
.tx-ikanos-hmsi-blacklist .table th:nth-child(5) {
  min-width: 160px; /* Mindestbreite für die 5. Spalte (Fehlversuche) */
}
/* Links in der Heilpraktiker-Blacklist Tabelle sind von der Verschiebung der Before-Icons betroffen, haben also eine riesige Lücke zwischen Icon und Text - Bug kam durch Korrektur des Verhaltens bei Links in eingerückten Listen dazu  - Dieser Fix soll das verhindern (siehe letzte Spalte hier https://heilpraktiker-blacklist.hmsi.stage.ikanos.de/heilpraktiker-blacklist/ ) */
.tx-ikanos-hmsi-blacklist a {white-space:unset!important;}
/* Die Links in der Heilpraktiker Blacklist dürfen eigentlich alle kein Before-Icon bekommen. Das müsste als Ausnahme in der CSS Regel dafür noch mit aufgenommen werden. Hier der provisorisch Fix, überschreibt die Icon-Regel */
.tx-ikanos-hmsi-blacklist a::before {
  content: none !important; /* Entfernt das Icon */
  display: none !important; /* Verhindert leeren Platz */
}



/* Hero Image schien oben abgeschnitten - wegen Text in Bildern besser unten abschneiden 
#hero {
    position: relative;
    background-repeat: no-repeat;
    background-color: var(--bs-primary);
}
@media only screen and (min-width: 1600px) {
  #hero {background-size:1600px auto;}
}*/
/* ausnahme bzgl. header-positionierung auf der impfen-seite */
# pid-3598 #hero {
  background-position: center 0%;}


/* Login läuft viel zu breit */
.ctype-felogin_login {
  max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Listenelement haben null vertikale Abstände - macht lange link-Listen fast unerträglich, da brauchen wir einen kleinen Abstand. Aber nur in RTE-Listen */
.ctype-textmedia li {
  margin-bottom: 0.5rem;
}

/* auf dem Page-Layout mit der Headline neben dem Hero ist die Headline grau, anstatt der Primärfarbe */
#hero .hero-content-container h1, #hero .hero-content-container .h1 {    color: var(--bs-primary);}

/* Es gibt eine Content-Seite wo ganz viele separate Tabellen untereinander sitzen - die kleben alle aneinander, brauchen etwas margin */
.table-responsive {margin-bottom: 3rem;}

/* Die Headlines auf der News-Übersicht haben viel zu viel Abstand zu den eigentlichen News */
.ctype-header + .ctype-news_pi1 {
  margin-bottom: 0rem; 
}
/* Die obrige Fehler scheint direkt aus der News-Teaser Sektion zu stammen */
.ctype-news_pi1 .news .section {padding-top:3rem;}

/* Irgendein Spezialfall.... */
#pid-4875 .ctype-textmedia + .ctype-service-card {margin-bottom:0rem;}

/* Kontaktformular Weitergabe von Daten Radio Buttons hervorheben */

.powermail_fieldwrap_weitergabevondaten  {
    padding: 1rem;
    background-color: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
      margin-bottom: 2rem!important;
  margin-top:2rem;
}
.powermail_fieldwrap_weitergabevondaten .powermail_field::before  {
  content: "Weitergabe von personenbezogenen Daten*";
}
.powermail_form .powermail_field:has(.form-check) {font-weight:bold;}
.form-check-label {font-weight:normal;}





/* Fokus und active states haben gefehlt, diese hier sind provisorisch  */


input:focus, textarea:focus {
  box-shadow: 0 0 0 0.4rem rgba(0, 123, 255, 0.25);
}

input, textarea {
  transition: box-shadow 0.3s ease-in-out!important;
}
button {
  transition: all 0.2s ease-in-out; /* Transition für alle Eigenschaften */
}

button:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

button:active {
  transform: translateY(1px); /* Button leicht nach unten verschieben */
  box-shadow: 0 0 0 0.2rem rgba(0, 100, 200, 0.5); /* Dunkleren Schatten */
}
/* Validierte Felder besser hervorheben */
.was-validated .form-control {border-style:solid;border-width:2px;}
.invalid-feedback {font-weight:600;}

/* Abstand zwischen Feldern zu groß */
.powermail_form .powermail_fieldwrap {
    margin-bottom: 1rem;
}


/* Hilfslink (Vergleich zur alten Site ausblenden auf mobile, sonst bricht das layout - sowieso für livegang entfernen */
@media only screen and (max-width: 575px) {
  #secretlink {display:none;}
}

/* Hero weniger hoch ist besser */
#hero:not(:has(.hero-image)) {
    height: 400px;
}

/* Der Content von  Gebärdensprache und Leichte sprache kleibt direkt an der Footer-Section */ 
.tpl-accessibility .content-container {margin-bottom:6rem;}

.news-card:has(.stretched-link):hover .card-title {
    text-decoration: underline;
}

/* Auf der Archiv-Übersichtsseite von Mädchen in Hessen macht die Überschrift für die Kacheln der Unterseiten "Weitere Themen" absolut keinem Sinn und müsste verschwinden. Besser wäre natürlich eine redaktionelle Eingriffsmöglichkeit, um diesen hardgecodeten Headertext zu überschreiben oder abzuschalten. Der Text der Überschrift ist auf einigen Seiten semantisch mehr als suboptimal */ 
#pid-5500 .section--subpages h2, #pid-857 .section--subpages h2 {display:none;}

/* Benuterzanmeldung-Text ausblenden */
.alert.alert-info h3:contains("Benutzeranmeldung") {
  display: none;
}

/* Accessibility nav bug link */
.tpl-accessibility .navigation-box .links a {white-space: unset!important;}

/* Logos im Footer mobile alle gleiche Breite */
@media (max-width: 767.98px) {
    .ctype-logo-bar .logo-bar__logo {
   
        width: 50%;
    }
}