@charset "utf-8";
/* CSS Document style.css */

.col-1 { 
margin: 0 1rem 1rem 0;
}

@media (max-width: 576px) {
.col-1 {
min-width: 17%;
}
}
@media (max-width: 768px) {
.col-1 {
min-width: 17%;
}
}
/* ============================================================= */
.fontawesome-site {
color: black;
text-decoration: none;
}
.fontawesome-site::before {
font: var(--fa-font-solid);
content: "\f2b4";
}
.icon-details {
color: black;
text-decoration: none;
}
.icon-details::before {
font: var(--fa-font-solid);
content: "\f86d";
margin-right: 12px;
}

 .kat-name {
  border-radius: 7px;
 }

 #alert .kat-name,
 #design .kat-name,
 #emoji .kat-name,
 #maps .kat-name,
 #hands .kat-name,
 #time .kat-name,
 #toggle .kat-name{
  width: 175px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
 #charity .kat-name,
 #coding .kat-name,
 #energy .kat-name,
 #gaming .kat-name,
 #editing .kat-name,
 #genders .kat-name, 
 #money .kat-name,
 #holidays .kat-name,
 #nature .kat-name,
 #political .kat-name,
 #religion .kat-name,
 #science .kat-name,
 #security .kat-name,
 #shapes .kat-name,
 #social .kat-name{
  width: 185px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
 #alphabet .kat-name, 
 #animals .kat-name, 
 #arrows .kat-name,
 #buildings .kat-name,
 #camping .kat-name,
 #moving .kat-name,
 #genders .kat-name,
 #shoppen .kat-name,
 #weather .kat-name,
 #writing .kat-name,
#solid .kat-name,
#regular .kat-name{
  width: 195px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
 #numbers .kat-name,
 #astronomy .kat-name,
 #maritime .kat-name,
 #logistic .kat-name,
 #spinners .kat-name{
  width: 205px;
  padding-left: 5px;
  border-radius: 7px;
 }

 #education .kat-name,
 #automotive .kat-name, 
 #childhood .kat-name,
 #marketing .kat-name,
 #household .kat-name,
 #halloween .kat-name{
  width: 220px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
 #business  .kat-name {
  width: 235px;
  padding-left: 5px;
  border-radius: 7px;
 }

 #connectivity .kat-name,
 #film-video .kat-name{
  width: 230px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
 #construction  .kat-name,
 #science-fiction  .kat-name{
  width: 240px;
  padding-left: 5px;
  border-radius: 7px;
 }

 #accessibility .kat-name,
 #fruits-vegetables  .kat-name,
 #mathematics .kat-name,
 #humanitaria .kat-name,
 #music-audio .kat-name,
 #transportation .kat-name,
 #travel-hotel .kat-name,
 #user-people .kat-name{
  width: 250px;
  padding-left: 5px;
  border-radius: 7px;
 }

 #communication .kat-name,
 #disatser-crisis .kat-name,
 #media-playback .kat-name,
 #photo-images .kat-name,
 #sports-fitness .kat-name,
 #text-formatting .kat-name{
  width: 265px; 
  padding-left: 5px;
  border-radius: 7px;
 }

 #files .kat-name,
 #food-beverage .kat-name{
  width: 270px; 
  padding-left: 5px;
  border-radius: 7px;
 }
 
 #devices-hardware .kat-name,
 #disaster-crisis .kat-name,
 #medical-health .kat-name {
  width: 290px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
  #clothing-fashion .kat-name,
  #charts-diagrams .kat-name,
  #fruits-vegetables .kat-name {
  width: 300px;
  padding-left: 5px;
  border-radius: 7px;
 }
 
  #punctuation-symbols .kat-name {
  width: 325px;
  padding-left: 5px;
  border-radius: 7px;
 }

/* ============================================================ */

 .kat-auswahl {
  max-height: 200px;
  overflow: auto;
 }
.custom-select-wrapper {
  position: relative;
  width: 177px;
  font-family: sans-serif;
}

.custom-select-selected {
  font-size: 15px;
  padding-top: 2px;
  padding-left: 5px;
  background: #f0f0f0;
  border: 1px solid #7e7d7d;
  border-radius: 5px;
  cursor: pointer;
}

 .custom-select-selected i {
  font-size: 12px;
  margin-left: 31px;
 }

.custom-select-options {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  width: 100%;
  max-height: 350px;
  overflow-y: auto;
  z-index: 1000;
}

.custom-select-options div {
  padding: 10px;
  cursor: pointer;
}

.custom-select-options div:hover {
  background-color: #eee;
}
  .custom-select-wrapper .custom-select-options { display: none; }
  .custom-select-wrapper.is-open .custom-select-options { display: block; }

/* ========================================================= */

.link-modal {
text-decoration: none;
color: #000;
}
.text-right {
float: right;
}
.icon-break {
padding-top: 32px;
padding-bottom: 33px;
background-color: #E0E0E0;
}
.kat-name {
font-size: 1.25rem;
font-weight: 600;
}
#icons figcaption {
display: flex;
flex-direction: column;
justify-content: space-evenly; /* Icon oben, Text unten */
flex: 1;
min-height: 3em; /* genug Platz für 2 Zeilen */
margin-bottom: 0;
line-height: 1;
font-size: 0.85rem;
}
/* ====================================================== */

.highlight-summary {
  background-color: #e6e6df; /* sanftes Grau als Beispiel */
  border: solid 1px #b5bcb9;
  transition: background-color 0.3s ease;
}

/* Orange-Highlight der Kachel */
.icon-hit-col {
  background-color: #ffc326;
  color: #000;
  outline: 2px solid rgba(0,0,0,.25);   /* <<< HIER entsteht der Rahmen */
  outline-offset: -2px;
}
/* Hover – so wie du’s magst */
#icons .col-1:hover,
#icons [class^="col-"]:hover,
#icons [class*=" col-"]:hover {
  border-radius: .5rem;
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: -2px;
  background-color: #ffc326;
  box-shadow: 0 0 6px 4px rgba(255,195,38,0.9);
}

/* Fokus – leicht stärker, bessere Kontrastwahrnehmung */
.col-1:has(.icon-trigger:focus-visible),
[class^="col-"]:has(.icon-trigger:focus-visible),
[class*=" col-"]:has(.icon-trigger:focus-visible) {
  border-radius: .5rem;
  outline: 2px solid rgba(0,0,0,.45);   /* etwas dunkler als Hover */
  outline-offset: -2px;
  background-color: #ffc326;
  box-shadow: 0 0 6px 4px rgba(255,195,38,1);
}

/* Standard-Fokus entfernen, damit nur der Custom-Fokus greift */
.icon-trigger:focus,
.icon-trigger:focus-visible { outline: none; }

/* High-Contrast / Windows „Forced Colors“ */
@media (forced-colors: active) {
  .icon-trigger:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}

/* ========================================================= */

/* Visually hidden (aber zugänglich für SR) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Fokus-Indikator für Optionen (Tastatur-Nutzer:innen) */
.custom-select-options [role="option"]:focus {
  outline: 2px solid #0ea5e9; /* dezent – gern an dein Design anpassen */
  outline-offset: 2px;
  border-radius: .4rem;
}

/* Optional: aktive Option visuell */
.option-active {
  background: #f3f4f6;
}

/* Fade-Out beim "nach oben" Reload (wie zuvor) */
body.fade-out {
  opacity: 0;
  transition: opacity .15s ease;
}
/* ========================================================= */

.solid a, .regular a{
text-decoration: none;
color: #000;
}

.solid {
text-align: center;
cursor: pointer;
}
.solid-active {
background-color: #E3E3E3;
}

.regular {
text-align: center;
cursor: pointer;
}

.solid:hover, .regular:hover {
background-color: #E3E3E3;

}
.regular-active {
background-color: #E3E3E3;
text-align: center;
}

.modell {
text-align: center;
font-size: 5rem;
}

.modal-code, #codePane  {
background-color: #E3E3E3;
}
.modal-code  pre, #codePane  pre {
word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  /* oder overflow-x: scroll; */
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  margin: 0 !important;
	padding-top: 7px;
	padding-bottom: 7px;
}

.modal-code pre code {
word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  color: #CA1161 !important;
}

#codePane pre code {
word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  color: #CA1161 !important;
}

/* --- Kategorie-Badges im Modal (#previewCat) --- */
#iconModal #previewCat .cat-badge {
  font-size: .9rem;
  text-transform: capitalize;
  padding: .5rem .6rem;
  cursor: pointer;
  margin-right: 4px !important;
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

/* Hover / Focus leicht betonen */
#iconModal #previewCat .cat-badge:hover,
#iconModal #previewCat .cat-badge:focus {
  opacity: .9;
}

/* Aktive Kategorie (Orange) */
#iconModal #previewCat .cat-badge.text-bg-primary {
  background-color: #ffc326 !important;
  border-color: #e3b000 !important;
  color: #222 !important;
}

/* Inaktive Kategorie (hell) */
#iconModal #previewCat .cat-badge.text-bg-light {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #dee2e6;
}

/* Scrollkomfort */
/* details { scroll-margin-top: 90px; } */


/* CSS in pre ============================================== */
.doc {
color: #64ADCC; /* Dokumententyp Dekleration */
}
.com {
color: #747474;
}
.att {
color: rgba(30,123,66,1.00);
}
.att-wert {
color: rgba(77,104,179,1.00);
}
.text {
color: #000;
}
/* Für CSS Code */
.variable {
 color: #776655;
}
.clas{
color: #D57100
}
.prefix{        /* zum Beispiel color, background-color, font-family ... */
color: #1E1E1E;
}

.prefix-color{   /* für Farbwerte */
color: #D8790F;
}

.prefix-zahl{   /* für Zahlenwerte wie 2rem */
color: #239059;
}

.prefix-name{  /* für Namen von Farben (red) Schriftfamilien (Arial, monospace,) oder auch calc, var ... */
color: #0252A6;
}

.prefix-unicode { /* Name für die Verwendung von Unicode */
  color: firebrick;
}

/* ########################################################################################## */
/* ================================================================= */
/* Start Gestaltung Navigation - .navbar-brand, - .active */
.navbar-brand::before {
font: var(--fa-font-solid);
content: "\f58c";
color: #F89A00;
margin-right: 0.5em;
}

.navbar-brand {
    border-radius: 25rem;
    background-color: #fff;
    padding: 2px 12px 4px 12px;
    border: solid 1px #F89A00;
    line-height: normal;
    font-size: 1rem;
    font-weight: 600;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: rgba(0, 0, 0, 1);
  font-weight: 600!important;
}
/* Ende Gestaltung Navigation - .navbar-brand, - .active */
/* ================================================================= */

/* ——— Breakpoint exakt 996px ——— */
@media (max-width: 1399.98px) {
  /* Mobil: Button sichtbar, Offcanvas-Overlay aktiv */
  .catnav-toggle { display: inline-flex; }
  /* Der Main-Container bekommt volle Breite, weil Offcanvas aus dem Flow ist (position: fixed) */
}

@media (min-width: 1899.98px) {
  /* Desktop: Button ausblenden */
  .catnav-toggle { display: none !important; }

  /* Offcanvas wird zur statischen Sidebar links */
  #catNavigation {
    position: static !important;
    visibility: visible !important;
    transform: none !important;
    bottom: auto !important;
    border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
    width: 280px; /* feste Sidebar-Breite */
  }

  /* Close-Button in der Kopfzeile ausblenden (nur mobil nötig) */
  #catNavigation .catnav-close { display: none !important; }

  /* Optional: Offcanvas-Backdrop unterdrücken (wird ohnehin nicht erzeugt, da kein Offcanvas-Zustand) */
  .offcanvas-backdrop { display: none !important; }
}
#catNavList .active .badge.bg-secondary{
  background-color: white !important;
}
  #catNavList .badge {
    background-color: transparent !important;
    color: black;
    font-size: 1rem;
    font-weight: 300;
    display: inline;
  }

  .btn-cat-nav::before {
    font: var(--fa-font-solid);
    content: "\f0c9"; /* fa-bars */
    font-size: 1.5rem;
    margin-right: 0.5rem;
  }

  #iconsSearchContainer h4 {
    padding-bottom: 1rem;
    border-bottom: solid 1px orange;
  }
  #iconsSearchRowSolid, #iconsSearchRowRegular {
    margin-top: 1.25rem;
  }
  #iconsSearchSolid .h4, #iconsSearchRegular .h4 {
    font-size: 1.25rem !important;
  }
  
  #iconsSearchSummary {
    font-size: 1.25rem;
    padding-bottom: 2rem;
  }
   .position-sticky {
   top: 1rem;
  }
 @media (width: 996px) {
  .position-sticky {
   margin-top: 1rem;
  }
  #catNavigationLabel {
   margin-top: 3.5rem;
  }
 }
  #previewCat .text-bg-light:hover {
    background-color: cadetblue !important;
    color: white !important;
  }
#solidCell[aria-pressed="true"],
#regularCell[aria-pressed="true"] {
  background-color: var(--bs-success);
  color: #fff;
}

#solidCell[aria-pressed="false"],
#regularCell[aria-pressed="false"] {
  background-color: transparent;
  color: inherit;
}
#codeBlock .code-sample pre {
  white-space: pre;           /* oder pre-wrap, wenn Soft-Wrap gewünscht */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  line-height: 1.4;
  padding: .5rem .75rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .25rem;
  margin: 0;
}